Chrome DevToolsの使い方 — 開発効率が上がる実践活用ガイド

Webページのレイアウトが崩れている、APIのレスポンスがおかしい、JavaScriptがエラーを吐いている——そんなときに真っ先に開くのがChrome DevTools（開発者ツール）です。パネルの数が多く最初はとっつきにくいですが、よく使うパネルを絞れば十分に使いこなせます。

開発者ツールを開く

開く方法は複数あります。

Ctrl + Shift + Cで開くと、ページ上の要素にカーソルを合わせるだけでHTML構造を確認できるモードになります。レイアウト崩れの原因をすぐ探りたいときはこれが最速です。

Elementsパネルでは、ページのHTML構造をツリー表示で確認できます。要素をクリックすると、右側にその要素へ適用されているCSSプロパティが一覧表示されます。

CSSの値はその場で書き換えられます。marginやpaddingの数値を変えたり、display: noneを外したりすると、変更がページに即座に反映されます。ただしこの変更はページを再読み込みすると消えるため、確認用途に使い、実際の修正はソースコードに反映する必要があります。

レイアウト崩れの原因調査では、崩れている要素をElementsパネルで選択し、どのCSSプロパティが効いているか（あるいは意図せず上書きされているか）を確認するのが基本的な流れです。

ConsoleパネルにはJavaScriptのエラーメッセージが自動的に表示されます。エラー行をクリックすると、該当するソースコードの行にジャンプできます。

Console自体にJavaScriptのコードを直接入力して実行することもできます。ページ内で定義された変数の値を確認したり、DOM要素を操作したりする際に使えます。

コード側にconsole.log()を仕込んでおけば、その出力もConsoleパネルに表示されます。処理がどこまで実行されているか、変数にどんな値が入っているかを追いたいときの基本的な手段です。

Networkパネルを開いた状態でページを操作すると、発生した通信が一覧に記録されます。各リクエストをクリックすると、リクエストヘッダー・レスポンスヘッダー・レスポンス本文（Response/Previewタブ）を確認できます。

APIのレスポンス内容がおかしい場合は、まずこのパネルで実際に返ってきているデータを確認するのが早道です。Previewタブでは画像やHTMLレスポンスを整形して表示してくれるので、生のレスポンスより見やすいことがあります。

通信が遅い場合は、Network conditionsのThrottlingメニューから低速回線（Slow 4Gなど）をエミュレートし、遅延時の挙動を再現して調査できます。

Sourcesパネルでは、読み込まれているJavaScriptファイルを開いて、コードの行番号をクリックすることでブレークポイントを設置できます。ブレークポイントを設置した行に処理が到達すると、そこで実行が一時停止し、その時点での変数の値をすべて確認できます。

一時停止した状態から一行ずつ処理を進める、関数の中に入る、関数から抜けるといった操作ができるため、console.logを大量に仕込むより効率的に処理の流れを追えます。特定の条件が満たされたときだけ止めたい場合は、条件付きブレークポイントも設定できます。

LighthouseパネルはWebページの品質を自動で計測してくれる機能です。実行するとパフォーマンス・アクセシビリティ・SEOなどの項目についてスコアと改善提案付きのレポートが生成されます。ページの読み込みが遅いと感じたときの最初のチェックに向いています。

より詳細に処理のボトルネックを追いたい場合はPerformanceパネルを使います。記録開始からページ操作を行い記録を止めると、どの処理にどれだけ時間がかかったかがタイムライン形式で表示されます。

まずはF12で開いて、ElementsとConsoleの2つのパネルに慣れることから始めると、デバッグの基本的な流れがつかめます。