【初心者でも分かる】Googleデベロッパーツールとは?使い方を紹介します

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

デベロッパーツールとは、Google Chromeから起動することのできるデバッグツールです。例えばWEBサイトのHTML構成やページの表示スピード、現在の通信状況などをここから確認できます。他に特別なツールやプログラムを使わずに、ブラウザのみで手軽に利用できることから、WEBサービスの開発やテスト、デザインのチェックを行うときに活用できます。

今回はGoogle Chromeについて紹介していますが、これに限らず、Microsoft EdgeやSafariなどといった他のブラウザにも、同じようにデバッグツールが搭載されています。

起動方法

はじめに、デベロッパーツールを起動する方法から解説していきます。
①WEBサイトからデベロッパーツールを開きたいページに行き、画面上の気になる要素(コードを調べたい部分)を右クリックします。
②表示されるメニューの中にある、“検証”をクリックします。
③下部もしくは右側にデベロッパーツールの画面が開きます。
ショートカットキーの場合は、【F12】キー、【Win:Ctrl+Shift+I Mac:Command + Option + I)】を押すことで起動します。

デベロッパーツールの使い方!何ができるの?

では、デベロッパーツールを使うと何ができるのでしょうか?

様々なデバイスサイズの表示確認

Chromeのデベロッパーツールを使うと、iPhoneなど様々な大きさの端末でどのように表示されているかをシミュレーションすることができます。
これをデバイスモードと呼び、WEBサイトを作るときやリニューアルをする際にはこのモードで確認しながら作業を行うことも多いかと思います。
デバイスモードを起動して画面左上の部分をクリックすると、様々な端末のサイズ(Android各種、iPhone5/SEからiPhoneⅩまで、タブレット)が用意されているので、任意の端末を選んで確認してみてください。
“Responsive”を選んだ場合、表示領域の右端をドラッグすることで任意の画面の大きさを指定することも可能です。

デベロッパーツールの活用方法

次に、デベロッパーツールの活用方法を見ていきましょう。

Elements:HTMLやCSS等の静的な記述を確認

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

タグを確認できる

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

一時的なページ編集も可能

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

Console:JavaScriptの動的な記述を確認

“Console”タブを開くと、ページ上で動いているJavaScriptのエラーを確認できます。WEBを改修した際や新たに広告タグを設置した際に挙動がおかしいと感じたら、まずはこのパネルを見て原因特定すると良いでしょう。
この“Console”では上記のエラーチェックだけでなく、任意のJavaScriptの挙動を確認することができます。“Console”にJavaScriptを打ち込んで実行するとそのJavaScriptをページ上で一時的に動かすことができます。
このときJavaScriptの記述誤りがあったりページ側でJavaScriptが実行できない仕様であったりする場合はエラーが返されます。
例えば、“Console”に「console.log(‘こんにちは’); 」という記述を打ち込み実行すると、「こんにちは」が返されます。「console.log()」を使うことでJavaScriptプログラムから値や文字を出力できるため、このような1行の簡単な記述から長い記述まで簡単にテストをすることができるのです。

Application:Cookie情報の確認

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

まとめ

ここまでデベロッパーツールの基本的な使い方を紹介してきました。この記事の内容をおさえるだけでもウェブ制作がグッと効率的になるはずです。
デベロッパーツールは今回取り上げた以外にも様々なパネルがあり、WEBで仕事をするうえで何かしらの助けになるかと思います。
今回で初めてデベロッパーツールを知った方も、少しだけ使ったことがあるという方も、
改めてデベロッパーツールに触ってみてその便利さを体験してもらえたらうれしいです。

導入可否などお気軽にお問い合わせください