覚えると便利?楽しい!GoogleChromeデベロッパーツールの基本まとめ!

覚えると便利?楽しい!GoogleChromeデベロッパーツールの基本まとめ!

みなさんこんにちは!
夏の暑さもまだまだ続きますが、9月がやってまいりましたね。早く涼しく過ごしやすい時期になってほしいものです。

さて、今回はGoogleChromeで使用できる便利な機能、「デベロッパーツール」というものを紹介します。

デベロッパーツールとは?

なに?

GoogleChromeに搭載されているデバックツールのことで、Web上のソースコードや要素を見ることができたり、一時的に表示されているWEBサイトのデザインを変更できたりすることができるWEB開発者向けのツールです。

その名の通り、主にエンジニアの方々には必須といっても過言ではない存在ですが、そうでない方々にとってはどこか近寄りがたい雰囲気があります。ですがこのツールは、WEBデザイナーやWEBマーケッター、WEB広告などWEBに関わる仕事をしている方にとっても便利な機能が多く備わっています。

そこで次は、そういったWEBに広く関わる皆さん向けに、デベロッパーツールがどのように活用できるかをご紹介します。

「デベロッパーツール」の起動方法

起動!
まず、デベロッパーツールの起動方法ですが、調べたいページ上で以下を実行します。
 1.右クリック→「検証」を選択
 2.【F12】キーを押下
 3.【Win:Ctrl+Shift+I Mac:Command + Option + I)】を押下
上記いずれかを実行すると画像のようにデベロッパーツールが表示されます。

「デベロッパーツール」の使い方・活用例

デベロッパーツールを表示すると「Elements」や「Console」というパネルが表示され、これらのパネル内で様々な検証、確認を行うことができます。ここでは一部を紹介します。

 -「Elements」

Elements
 デベロッパーツールを開いているページのソースコードが表示されます。
 またそのソースにカーソルをあてると要素を検索できます。

 例えば新たに広告を導入した際WEBページにタグを設置するかと思いますが、この「Elements」を用いると設置後正しく貼れているかをすぐに確認することができます。
 ※ただし、GoogleやYahoo!で提供しているタグマネージャーにてタグ設置を行った場合、この「Elements」では確認できない場合があります。

 この「Elements」を用いて、一時的にページを編集することも可能です。
Elements
 Elements上で表示されているコードは直接書き換えることが可能なので、
 例えばWEB制作にて文言を変更したい場合、まずは「Elements」で一度書き換えてバランス等を確認してから実際に制作に入る、というような活用ができます。
このElements上で書き換えても、実際のページやWEBサイトには影響がない一時的なものなので、気軽に活用できそうですね。

 -「Console」

Console
 ページ上で動いているJavaScriptのエラーを確認できます。WEBを改修した際や新たに広告タグを設置した際に挙動がおかしいと感じたら、まずはこのパネルを見て原因特定すると良いでしょう。

 この「Console」では上記のエラーチェックだけでなく、任意のJavaScriptの挙動を確認することができます。「Console」にJavaScriptを打ち込んで実行(エンターキー)するとそのJavaScriptがページ上で一時的に動かすことができます。
このときJavaScriptの記述誤りがあったりページ側でJavaScriptが実行できない仕様であったりする場合はエラーが返されます。

上記画像では、「Console」に「console.log(day)」という記述を打ち込み実行すると、リアルタイムの日時が返されます。このように1行の簡単な記述から長い記述まで簡単にテストをすることができます。

「Elements」ではHTMLやCSS等の静的な記述を、「Console」ではJavaScriptの動的な記述を確認することができると覚えればわかりやすいですね。

 -「Application」

Console
 Strageや現在付与されているCookieの確認・編集が可能です。

 WEB広告や計測ツールにおいてCookie情報は必須な要素になりますが、この「Application」を開いていると、ページ移動をしていてもリアルタイムでCookieがどうなっているかを確認することができます。
そのため、広告やツール導入などで任意のCookieを付与する際にはこの「Application」を用いながら操作すると良いでしょう。

 -他のデバイスモードで閲覧する(「Toggle Device toolbar」)

Console
 前述した「Elements」や「Console」と同じ列にスマホとブラウザのようなアイコン(フォーカスすると「Toggle Device toolbar」と表示される)があります。こちらをクリックすると、そのページを他のデバイスで閲覧したときにどう見えるかを確認することができます。
閲覧できるデバイスはAndroid各種、iPhone(5/SEからⅩまで)、タブレットなど一通りそろっているので、
例えば既に販売終了となっている旧世代のiPhoneなどで検証をしたい場合には非常に便利な機能だといえます。

おわりに

簡単ではありますが、今回はGoogleChromeの「デベロッパーツール」についてご紹介しました。
「デベロッパーツール」は今回取り上げた以外にも様々なパネルがあり、WEBで仕事をするうえで何かしらの助けになるかと思います。

今回で初めて「デベロッパーツール」を知った方も、少しだけ使ったことがあるという方も、
改めて「デベロッパーツール」に触ってみてその便利さを体験してもらえたらうれしいです。