Googleデベロッパーツールの使い方を動画入りで丁寧に解説!

HTMLやCSSなどのコードに馴染みのない人や、WordPress初心者から多く質問されることが「文字のサイズや色を変えたい」「背景色をもっと明るい色に変えたい」など見た目に関すること。

これらの変更はCSSを編集すると解決できます。
ただ「CSSのどこを編集すればいいのか」とコードを一つ一つ確認しながら探す作業はとても時間が掛かりますよね。
そんな地道な作業で役立つのが、『Googleデベロッパーツール(開発者ツール)』です。

そこで今回は、Googleデベロッパーツールの基礎知識や使い方、コーダーとして知っておきたいポイントを動画入りで丁寧に解説。
「コードの検証がしたい」「デベロッパーツールの使い方を知りたい」と思っている方は必見です。

目次

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

Googleデベロッパーツールとは、Google Chromeから起動できるデバッグツール。

WebサイトのHTML構成やページの表示速度、現時点での通信状況などが確認できます。
特別なプログラムやツールを使わずにブラウザで気軽に利用できるので、Webサービスの開発やテスト、デザインチェックでも活用できます。

今回はGoogle Chromeについて解説していますが、SafariやMicrosoft Edgeなど他のブラウザにも、Googleデベロッパーツールと似たようなデバッグツールが搭載されています。

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

ここでは、Googleデベロッパーツールの起動方法を解説します。

①Googleデベロッパーツールで調べたいWebページにアクセス
②画面上の気になる要素(コードを調べたい部分)を選択
③表示されるメニューの中にある「検証」をクリック

④デベロッパーツールの画面が開く※今回は右側・ショートカットキーの場合は【F12】キーまたは【Win:Ctrl+Shift+I・Mac:Command + Option + I)】を押すと起動

Googleデベロッパーツールを使うと、iPhoneやandroidなどさまざまな大きさのスマートフォン端末の表示がシミュレーションできます。これはデバイスモードと呼ばれていて、Webサイト制作時やリニューアル時にはデバイスモードで確認しながら作業する機会も多いかと思います。

※GIF動画

デバイスモードを起動して画面左上をクリックすると、さまざまなスマートフォン端末のサイズ(Android・iPhoneⅩ・タブレット)が用意されているので、確認したいスマートフォン端末を選んで確認しましょう。

ちなみに、Responsiveを選び表示領域の右端をドラッグすると、任意の画面サイズが指定できます。

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

ここからは、Googleデベロッパーツールの活用方法を解説します。

Chromeデベロッパーツールにはパネル機能が搭載されています。パネル機能とはChromeデベロッパーツールのタブ部分に表示されている機能で、クリックするとパネルの切り替えができます。

ここでは、比較的使う頻度が多いパネルの解説です。

Elementsパネル

※GIF動

Elementsパネルを開くと、開かれているページのソースコードが表示されます。

併せて確認したいソースコードにカーソルを当てると要素が検索できます。
例としては、新たに広告を導入した時にWebページにタグを設置すると思います。

この時にElementsパネルを使うと、タグが正しく貼れているかが確認できます

※GoogleやYahoo!で提供しているタグマネージャーにてタグ設置を行った場合では、Elementsでは確認できない場合もあります。

Consoleパネル

Consoleパネルを開くと、ページ上で動くJavaScriptのエラーが確認できます。

Webを改修した時や新たに広告タグを設置した時に「挙動がおかしい」と感じたら、まずはConsoleパネルで原因を特定することをおすすめします。
Consoleパネルではエラーチェックだけでなく、任意のJavaScriptの挙動も確認できます。

Securityパネル

Securityパネルとは、https通信の安全性を確認する機能があります。

https通信が確立しているWebサイトではサーバーで使っている証明書を閲覧できるだけではなく、http通信で読み込んでいるWebページのリソース一覧も確認できます。

Sourcesパネル

Sourcesパネルは、CSSやJavaScriptをデバッグする機能があります。

処理を一次的に止められるブレークポイントだけではなく、ソースコードの直接編集機能などデバッグに役立つ機能が充実しています。
SourcesパネルはWebページ修正時に大きな役割を果たします。

Applicationパネル

※GIF動画

Applicationパネルでは、Storageや付与されているCookieの確認や編集ができます。

Web広告や計測ツールではCookie情報が必須。
Applicationパネルを開いていると、ページ移動状態でもCookieがどうなっているかがリアルタイムで確認できます。
広告やツール導入などで任意のCookieを付与する時には、Applicationパネルを使いながら操作すると良いでしょう。

Networkパネル

Networkパネルでは、Webページを表示した時の通信内容が確認できます。

ページ表示速度だけではなく、ページが使用している画像データやテキスト、使用されたCookie情報なども確認できます。
通信内容は項目ごとに詳細情報が取得できるので、ページ表示が遅くなっている原因の特定もできます。

Performanceパネル

※GIF動画

Performanceパネルでは、Webページの表示速度が計算できます。

表示速度を計測したいWebページでGoogleデベロッパーツールを開くと、Performanceパネル内で速度確認できます。
ページが完全に表示されるまでの速度だけではなく、処理時間の内訳も確認できるので、Webページ表示の高速化に使える機能なのです。

Web制作者として知っておきたいポイント

ここでは、コーダーとして知っておきたいポイントを幾つか解説します。

ショートカットキー

Googleデベロッパーツールで使う頻度が多いショートカットキーをいくつかご紹介します。

WindowsMac
デベロッパーツールの起動「Ctrl」+「Shift」+「I」「Cmd」+「Opt」+「I」
Consoleを直接開く「Ctrl」+「Shift」+「J」「Cmd」+「Alt」+「J 」
検証ツールの位置切替「Ctr」+「Shift」+「D」「Cmd」+「Alt」+「D」
モバイルプレビュー表示「Ctr」+「Shift」+「M」「Cmd」+「Shift」+「M」
HTMLやテキストの編集「F2」「F2」+「Fn」
要素検索「Ctr」+「F」「Cmd」+「F」

ショートカットキーを覚えておくと作業効率が向上するので、今回を機会に覚えてみてはいかがでしょうか?

表示位置の変更

Googleデベロッパーツールでは作業位置も変更できます。

①Webページ上で右クリック⇒【検証】をクリック

②デベロッパーツール右上の「…」をクリック

③Dock side内の表示させたい位置をクリック※今回は例として右側に表示させる

右側に寄せた場合はサイトが縦に見やすくなるので、レスポンシブコーディングなどをしている場合は右側配置が見やすいのではないでしょうか。

表示位置には好みがあるので、自分に合う場所にGoogleデベロッパーツールを表示させると安心です。

スクリーンショット撮影

「サイトの全体をキャプチャしたい」と思った時も、Googleデベロッパーツールならスクリーンショットも撮影できます。

①スクリーンショットを撮影したいWebページ上で右クリックして「検証」をクリック※ショートカットキーはWindowsなら「Ctrl+Shift+I」・Macなら「command+option+I」でも開ける

ショートカットキーを使って詳細機能を呼び出すと、上記のウィンドウが表示されます。
※Windowsなら「Ctrl+Shift+P」・Macなら「command+shift+P」を同時に押す

検索窓に「full」と入力して「Capture full size screenshot」を選択しましょう。
すると自動でページ全体のスクリーンショットのダウンロードが始まります。

ダウンロードが完了すると、ダウンロードフォルダにページ全体のスクリーンショットが表示されます。

ダウンロードされた画像ファイルはページ全体を画像データとして保存しているので、大きなファイルサイズとなります。
この状態ではメール添付だけではなく、多くのWordPressへのアップロードもできません

※アップロードサイズは使っているレンタルサーバー設定によって異なります。圧縮ツールなどでファイルサイズを小さくすれば問題ありません。

まとめ

Googleデベロッパーツールの基礎知識や使い方、コーダーとして知っておきたいポイントを動画入りで丁寧に解説しました。

Googleデベロッパーツールは今回取り上げたパネル以外にもさまざまなパネルがありますし、Web制作がさらに効率化に貢献する効果が期待できるツールです。

今回の記事を参考にして、GoogleデベロッパーツールをWeb制作に活用してはいかがでしょうか?

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次