Chromeデベロッパーツールの便利な使い方！タブの用途・使い方のコツを解説

Google Chromeデベロッパーツールを使いこなせていますか？経験豊富なプロのエンジニアやWebデザイナーに限らず、初心者ブロガーにとっても役立つ機能が満載。そこで今回は、Web開発に携わっている全ての方へ向けて、基本機能・タブの役割・便利な使い方などをご紹介します。

Chromeデベロッパーツールとは？

デベロッパーツール（Developer Tools ／DevTools）とは、ブラウザのみで手軽に利用できるデバッグツールの一種で、「Safari」や「Microsoft Edge」、「Firefox」といったモダンブラウザであれば基本的に標準で付属しています。

つまり、Chromeデベロッパーツール（DevTools）とは、Googleが提供しているWebブラウザ、「Chrome」に標準搭載されている「開発者向け検証ツール」なのです。

デベロッパーモードとも呼ばれており、Webサイト構成やデザインの調査・編集、通信速度などのページパフォーマンスやエラーチェックなどに役立ちます。

Chromeデベロッパーツールでできること

Chromeデベロッパーツールの機能は、自サイトのデザイン変更テストから他サイトのコードチェックまで広範囲にわたり、特に下記のような場面で活用されています。

▼Chromeデベロッパーツールの利用例

• HTML／CSSの構成チェック、編集、
• スマホやPCなど、各種デバイスでの表示チェック
• レンダリングや表示スピードなどのパフォーマンスチェック
• JavaScriptのデバック、パフォーマンスチェック、コマンドラインツール
• CookieやlocalStorageの確認、編集

コンテンツの構成・デザイン・パフォーマンスに対して調査・編集・テストが手軽にできる便利ツール、と言った方が適切かもしれません。

だからこそ、プログラマーをはじめWebデザイナーやコーダーなど、「サイト開発に関わる全てのエンジニアにとっての必須ツール」として認知されているのです。

Chromeデベロッパーツールの使い方：基本編

では早速、Chromeデベロッパーツールの基本的な使い方から見ていきましょう。

Chromeデベロッパーツールを起動する方法

Chromeデベロッパーツールの起動方法は、OSの種類によって異なります。

▼Windowsで起動する方法

• Google Chromeの右上「メニュー」→「Google Chromeの設定」→「その他のツール」→「デベロッパーツール」を選択
• 特定箇所の表示：ページ上で「右クリック」→ 「検証」 を選択
• ショートカットキー：「Ctrl」+「Shift」+「I」
• ファンクションキー：対象ページ上で「F12キー」を押す

▼Macで起動する方法

• Google Chromeの右上「メニュー」→「Google Chromeの設定」→「その他のツール」→「デベロッパーツール」を選択
• 特定箇所の表示：ページ上で「右クリック」→ 「検証」 を選択
• ショートカットキー：「Cmd」+「Opt」+「I」
• チェックしたい箇所を表示するショートカットキー：「Cmd」+「Shift」+「C」

見たい箇所を素早くチェックするには、ページ上での右クリックがおすすめです。

マウスカーソルをチェックしたい任意の箇所に配置してクリックすると、見たいコードがピンポイントで表示されます。

表示位置を変更する方法

Chromeデベロッパーツールが表示される位置は、任意で変更することができます。

例題として、当サイトのTOPページをWindowsで起動してみましょう。

デフォルトでは画面右側にChromeデベロッパーツールが表示されます。

表示位置を変更したい場合は、赤枠のメニューをクリックし、緑色の枠で囲ったアイコンから選択しましょう。

画面の見方

下記画像の通りHTMLとCSSは分かれて表示されます。

▼Chromeデベロッパーツールの区分

• HTML：右上部の赤枠
• CSS：右下部の緑枠

しかし、実際には画面左側のコンテンツ・HTML・CSSの3区分は連動しており、HTMLの一部をクリックすると水色のマーカーで装飾され、関連するコンテンツとCSSが表示される仕組みになっているのです。

なお、CSSの右側に表示されているイラストは要素のサイズや余白を表しており、画面中央の黄色い枠で囲った矢印によって、表示・非表示の切り替えが可能です。

HTML関連タブ（パネル）の種類と特徴

HTMLとCSSの上部には、それぞれ機能を使い分けるための「タブ」が設けられています。

このタブは「パネル」とも呼ばれており、使用頻度の高さによって表示される順番が変更するのが特徴です。

Elementsタブ

HTMLの主要パネルであるElementsタブでは、「DOM」と「CSS」を操作してレイアウトやデザインの調査・編集を行うことが可能です。

変更したいコードをダブルクリックするだけでインタラクティブに編集でき、リアルタイムでページに反映されます。

Consoleタブ

Consoleタブでは、JavaScriptのエラーチェックやログ表示だけでなく、任意のJSを実行することも可能です。

▼Consoleタブのメリット

• JSの入力項目がオートコンプリートで表示されるので、コマンド入力が楽
• 「Shift」＋「Enter」で実行前に改行できるので、複数行のまとめ入力も可能
• 全てのパネルからアクセスできる
• Consoleパネルからでも、直接DOM操作が可能

ちなみに下記のショートカットキーを実行すると、Chromeデベロッパーツールを起動していなくてもConsoleタブが表示されます。

▼Consoleタブを表示するショートカットキー

• Windows：「Ctrl」+「Shift」+「J」
• Mac：「Cmd」+「Opt」+「J」

Sourcesタブ

Sourcesタブは、ブレークポイントを使用してJSを検証する際に便利なパネルです。

あらかじめ「整形ボタン」が備わっており、クリックするだけでコードがミニファイされて読みやすくなります。

Networkタブ

Networkタブは、レンダリングをブロックしている要因を特定したい時に便利な機能です。

各データが読み込まれる順番を検証することで、通信パフォーマンスの最適化に役立てることができます。

▼Networkタブのメリット

• ページからリクエストされたリソースが記録され、一覧表示で確認できる
• ダウンロードされたリソースを、詳しく分析できる
• JSや画像に加え、非同期通信のAjaxなども含めて通信状況がチェックできる

なお、デベロッパーツールを使用して表示速度を調査する方法については下記の記事でも詳しく解説しております。

Performanceタブ

「読み込み」調査に特化しているNetworkタブに対して、Performanceタブは下記3点について一連でパフォーマンス調査ができるという強みがあります。

▼Performanceタブの一連処理

• 読み込み
• レンダリング処理
• ユーザー操作により発生した全てのイベント

具体的な使い方については、下記で後述いたします。

Memoryタブ

Performanceタブよりも詳しくメモリリークを追跡したい時は、Memoryタブを使用します。

プロファイリングタイプは下記の3種類です。

▼プロファイリングタイプの選択肢

• Heap snapshot：JavaScriptオブジェクトと関連 DOMのメモリ分布を調査
• Allocation instrumentation timeline：JSヒープのメモリリークを追跡する
• Allocation sampling：サンプリングからメモリの推移を計測する

Applicationタブ

Applicationタブは、読み込まれた全リソースの調査、および編集を行う時に使用します。

▼対象リソースの一例

• Cookie
• 画像
• フォント
• スタイルシート
• アプリケーション キャッシュ
• IndexedDB
• Web SQLデータベース
• ローカル ストレージ
• セッション ストレージ

Securityタブ

Securityタブは、主に下記3点の安全性を検証する際に便利な機能です。

▼デバッグできる安全性の種類

• 有効な「証明書」が使用されているか？
• TLS接続など、「 安全な接続」が確立されているか？
• TLS/SSLなど、「安全なリソース」で配信されているか？

ページの安全性が確保されている場合は、下記のように表示されます。

Lighthouseタブ

Lighthouseタブは、主に下記5点についてモバイル・PCに分けて検証できます。

▼Lighthouseタブの主な検証対象

• サイトのパフォーマンス
• PWA
• ベストプラクティス
• アクセシビリティ
• SEO

ちなみに、Chrome82ではLighthouseタブとして搭載されています、バージョンによっては「Auditsタブ」という名称が使われています。

CSS関連のタブ

CSS関連のタブはElementsタブを選択した時に表示され、下記の6種類に分かれています。

▼CSS関連タブの種類と特徴

• Styles：スタイルのプロパティ名、および値の編集
• Computed：選択した要素のボックスモデルを表示、および編集
• Event Listeners：イベントリスナーを一覧で取得
• DOM Breakpoints：要素のサブツリーや属性の変更、削除が発生した際にブレークポイントが設定できる
• Properties：各要素に対し、プロパティ値の情報を一覧で取得
• Accessibility：Accessibility Tree、ARIA Attributes、Computed Propertiesの情報閲覧

Chromeデベロッパーツールの使い方：実践編

ここからは、Chromeデベロッパーツールの具体的な利用例について解説します。

HTMLのテスト編集（テキストの変更）

Chromeデベロッパーツールに手を加えても、実際のソースコードには影響しません。

つまり、あくまで自分のブラウザ上で一時的に変更するだけなので、何度でも試すことができます。

今回は、当サイトTOPページの「Service」を「サービス」に変更してみましょう。

HTMLのテスト編集は、下記の手順で行います。

▼HTMLを編集する手順

1. コンテンツの変更したい箇所で右クリックし、検証を選択して起動
2. Elementsタブを選択
3. 変更したいコード上でダブルクリック
4. 「Service」を「サービス」に変更

すると、下記のようにリアルタイムでコンテンツに反映されます。

CSSのテスト編集（背景カラーの変更）

続いて、最もニーズの高いCSSを編集してみましょう。

例題として、上記で解説した「Service」の背景をグレーからピンクに変更してみます。

▼CSSを編集する手順

1. Elementsタブを選択
2. Stylesタブを選択
3. CSS区分で、「Service」の背景を「#f1f1f1」から「#ffccff」へ変更する

すると、下記のようにリアルタイムでコンテンツに反映されます。

同様に、CSSでは画像サイズやマージンなどの変更も手軽にできるので、見栄えを確認しながら試してみましょう。

リンク切れのエラーチェック

「リンク切れ」やJavaScriptなどの「プログラムエラー」を検証する際は、Consoleタブを使います。

例題として、当サイトTOPページの「リンク切れ」について検証してみましょう。

▼リンク切れの検証手順

1. 左上の「ペコプラ」というロゴ上で右クリックしてデベロッパーツールを起動
2. Consoleタブを選択

ここで、何かのエラーが検出された場合、下記の3色でリスク度が把握できる仕組みになっています。

▼リスク度の見分け方

1. 赤：危険度が高いエラー
2. 黄：警告もしくは、修正が必要なレベル
3. 黒：その他のログなど

当サイトのロゴはリンクが有効になっていますので、何も表示されないはずです。

仮に、リンクが切れている場合はどのように表示されるのか、確認してみましょう。

▼実在しない画像ファイル名への変更方法

1. Elementsタブを選択
2. 対象コード上でダブルクリック（背景が水色に変化する）
3. ロゴのimgタグのsrc以降に「実在しない画像ファイル名」を入力
4. Consoleタブを選択

画像ファイルが実在しないためリンク切れとなり、右上にあったロゴが非表示になるのはもちろん、Consoleタブでも下記のようにエラーが表示されます。

スマホ表示で確認する方法

表示される状態を異なる端末ごとにシミュレーションできるのも、Chromeデベロッパーツールならではのメリットです。

ここでは、スマホの表示状況を確認してみましょう。

▼スマホ表示を確認する手順

1. 赤枠のデバイスモードクリック
2. コンテンツ画面に、緑の枠で囲ったスマホ用のアイコンが表示される

ちなみに、iPhone6 などバージョンを含む特定のデバイスで確認したい時は、下記の手順で行います。

▼特定のデバイスを指定する手順

1. 青枠で囲った設定アイコンをクリック
2. 左のメニューから「Device」を選択
3. 右のメニューから特定のデバイスを選択

ページのパフォーマンスを確認する

パフォーマンスの検証は下記の手順で簡単に実行できますが、ページによってはかなり時間がかかる可能性もあります。

▼パフォーマンスを確認する手順

1. 上部の「Performanceタグ」を選択
2. 「●」または「更新」アイコンを選択

読み込みが完了すると、下記の画面へ自動的に切り替わります。

パフォーますは大きく下記の3種類で構成されています。

▼概要ペイン（概要ペイン）

アクセスしてから、表示完了までの時系列を表しており、「FPS」で１秒あたりのフレーム数を、「CPU」でCPU リソースの消費量を、「NET」では各処理にかかった時間を個別に表しています。

▼フレームチャートペイン（緑枠）

イベントやアクティビティに対し、内訳などが詳細に表示されます。

▼Summaryタブの円グラフ（青枠）

ページ表示にかかった時間の内訳を、6種類の項目に分けて視覚的に表しており、最後に

トータル時間が表示されます。

Chromeデベロッパーツールのショートカットキー

最後に、よく使うショートカットキーをいくつかご紹介します。

	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」

まとめ

検証ツールは各プラウザに標準搭載されていますが、とりわけ優秀と言われているがGoogle Chromeデベロッパーツールです。

特に下記の3点は、他ブラウザの検証ツールよりも高く評価されています。

• 機能が圧倒的に充実している
• 利用者が多いため、情報が豊富で解決策が見つけやすい
• 初心者でも扱いやすい使い勝手の良さ

世界的に最も多くのWeb開発者が使用している検証ツールだからこそ、早めにマスターしておきましょう。