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

2022-07-212024-06-19

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サイト制作時やリニューアル時にはデバイスモードで確認しながら作業する機会も多いかと思います。

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

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

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

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

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

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

Elementsパネル

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パネル

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

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

Networkパネル

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

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

Performanceパネル

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

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

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

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

ショートカットキー

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

	Windows	Mac
デベロッパーツールの起動	「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」