Chromeデベロッパーツールの使い方：よく使うパネルを実践解説

Chrome DevTools（デベロッパーツール）は、Google Chromeに組み込まれたWeb開発者向けのツール群です。F12、WindowsとLinuxではCtrl + Shift + I、MacではCmd + Option + Iで開きます。ページのHTMLやCSSをその場で確認・編集し、JavaScriptを実行し、すべてのネットワークリクエストを確認し、パフォーマンスを計測し、スマホをエミュレートし、ページを監査できます。このガイドでは、使用頻度の高いパネルを必要になる順に紹介し、時間を大きく節約できるショートカットもまとめます。

DevToolsの開き方と画面の見方

キーボードショートカットのほか、任意の要素を右クリックして検証を選ぶと、その要素を選択した状態でDevToolsが開きます。Chromeのメニューのその他のツール > デベロッパーツールからも開けます。

最初に押さえておきたいのは次の3つです。

• 上部のパネルタブ（Elements、Console、Sources、Networkなど）。あまり使わないパネルは>>の中に隠れています。
• 3点メニューのドックの位置。右、下、左、別ウィンドウから選べます。モニターが2台あるなら別ウィンドウが便利です。
• コマンドメニュー：Ctrl + Shift + P（MacはCmd + Shift + P）。機能名（「screenshot」「disable JavaScript」「dark mode」など）を入力すれば見つかります。DevToolsで何ができるかを知る一番の近道です。

Elements：HTMLとCSSの確認・編集

Elementsパネルに表示されるのは元のソースではなく実際のDOMなので、JavaScriptで追加された要素も含まれます。ノードを選ぶと、右側のStylesペインに適用されているCSSルールがすべて表示され、どれが優先され、どれが打ち消し線で無効になっているかがわかります。

試してほしい操作：

• Stylesの値をクリックして編集すると、結果がすぐに反映されます。変更は再読み込みで消えますが、local overridesを設定すれば保持できます。
• :hovボタンで:hoverや:focusなどの状態をオンにすると、マウスを動かさずにインタラクティブな状態のスタイルを調整できます。
• 色の横にある色見本をクリックするとカラーピッカーが開き、テキストのコントラスト比も表示されます。
• Computedタブでは、各プロパティの最終的な値とボックスモデルを確認できます。
• 要素の横に表示されるflexやgridのバッジをクリックすると、レイアウトの線がページ上に重ねて表示されます。

Console：JavaScriptの実行とエラーの確認

Consoleにはページのエラー、警告、console.logの出力が表示され、ページのコンテキストでJavaScriptを実行することもできます。便利な機能：

• $0はElementsパネルで選択中の要素です。
• $$('a')はセレクタに一致するすべての要素を配列で返します。
• copy(obj)は値をクリップボードにコピーします。
• レベル（エラー、警告）やテキストで絞り込むと、不要なログを減らせます。

Sources：JavaScriptのデバッグ

Sourcesパネルにはページのファイルが表示され、ブレークポイントはここで設定します。行番号をクリックするとその行で一時停止し、ステップ実行しながら変数を確認できます。条件付きブレークポイント（行番号を右クリック）は、式がtrueのときだけ停止します。Event listener breakpointsを使えば、クリックやキー入力などのイベントで停止できるので、どのコードが動いているかわからないときに役立ちます。

Network：すべてのリクエストを確認

Networkパネルには、ドキュメント、スクリプト、画像、フォント、API呼び出しなど、ページが送るすべてのリクエストが、ステータス、サイズ、所要時間とともに一覧表示されます。リクエストをクリックすると、ヘッダー、ペイロード、レスポンス、時間の内訳を確認できます。

実践的な使い方：

• Disable cacheにチェックを入れると、DevToolsを開いている間は常に最新のファイルが読み込まれます。
• Throttlingのメニューで、遅いモバイル回線をシミュレートできます。
• 種類（Fetch/XHR、JS、Img）で絞り込むと、目的のリクエストを見つけやすくなります。
• リクエストを右クリックしてfetchやcURLとしてコピーすれば、別の場所で再実行できます。

Performance：ページが遅い原因を探す

ページの読み込みや操作を記録すると、Performanceパネルにスクリプト処理、レンダリング、描画、ネットワークといったブラウザの動作がタイムラインで表示されます。時間のかかるタスクは赤で示されます。自分の操作に対するCore Web Vitals（LCP、CLS、INP）もリアルタイムで表示され、考えられる原因のヒントも出ます。スマホに近い結果を得たい場合は、記録前にCPUスロットリングを4倍か6倍に設定しましょう。詳しくはモバイルの表示速度テストのガイドをご覧ください。

Application：ストレージ、Cookie、Service Worker

Applicationパネルでは、Cookie、localStorageとsessionStorage、IndexedDB、Cache Storage、登録済みのService Workerなど、ページが保存しているデータを確認できます。項目の編集や削除もできるので、ログイン状態をリセットしたり初回訪問時の動作を確認したりするのに最適です。Clear site dataを使うと、現在のオリジンのデータをすべて消去できます。

Lighthouse：ページを監査する

Lighthouseパネルでは、パフォーマンス、アクセシビリティ、ベストプラクティス、SEOの自動監査を、モバイルまたはデスクトップのモードで実行できます。手順はChromeでLighthouseのモバイル監査を行う方法で紹介しています。

デバイスモード：スマホやタブレットをエミュレート

デバイスツールバー（DevToolsにフォーカスがある状態でCtrl + Shift + MまたはCmd + Shift + M）を使うと、ページがスマホやタブレットの表示になり、対応するビューポート、ピクセル比、ユーザーエージェント、タッチイベントが適用されます。詳しくはChromeのモバイルエミュレータ解説をご覧ください。DevToolsを開かずに見た目をさっと確認したいなら、Mobile View Extensionでツールバーのボタンから同じようなプレビューを表示できます。

覚えておきたいショートカット

DevToolsを拡張する

Chrome拡張機能はDevToolsに独自のパネルを追加できます。React、Vue、Angular、Redux用のDevToolsや、axe DevToolsのようなアクセシビリティチェッカーがその例です。厳選リストはWeb開発者におすすめのChrome拡張機能にあります。

よくある質問

Chromeでデベロッパーツールを開くには？

WindowsとLinuxではF12かCtrl + Shift + I、MacではCmd + Option + Iを押すか、ページを右クリックして「検証」を選びます。

Chrome DevToolsでWebサイトを編集できますか？

自分のブラウザ上でページのHTMLやCSSを編集して、変更を試すことはできます。編集はローカルのみで再読み込みすると消え、実際のWebサイトは変わりません。

Chrome DevToolsは無料ですか？

はい。DevToolsはChromeや、Edge、Brave、OperaなどすべてのChromium系ブラウザに標準で入っており、追加のダウンロードは不要です。