【実務・中級編】【2024年版】Chrome DevTools完全ガイド：フロントエンド開発者が最初に覚えるべき必須機能7選 – デバッグ・コード品質・テストツール生産性向上バイブル

【2024年版】Chrome DevTools完全ガイド：フロントエンド開発者が最初に覚えるべき必須機能7選 – 開発スピードを劇的に高める実践テクニック

皆さん、こんにちは。日々の開発、お疲れ様です。テックリードとして、チーム全体の生産性を最大化するために、私が最も重要視しているツールの1つが「Chrome DevTools」です。これは単なるデバッグツールではなく、フロントエンド開発のあらゆる側面を劇的に効率化できる、まさに「開発者の第二の脳」と呼べる存在です。

しかし、多くの開発者はDevToolsの表面的な機能しか使いこなせていないのが現状です。本記事では、2024年現在、フロントエンド開発者が最初に覚えるべきDevToolsの必須機能7選を、実務で役立つ隠れたショートカット、生産性を爆上げするプラグイン、チーム開発での設定共有、そして実践的な設定ファイルのベストプラクティスまで、余すことなく徹底解説します。

この記事を読めば、あなたはDevToolsの真の実力を引き出し、開発スピードを飛躍的に向上させることができるでしょう。さあ、DevToolsマスターへの第一歩を踏み出しましょう。

—

DevToolsの基本画面構成と「なぜ」を理解する

まず、DevToolsを開いてみましょう。ChromeブラウザでWebページを表示し、`F12`キーを押すか、右クリックから「検証」を選択するだけです。

![DevToolsの基本画面構成](https://example.com/devtools_layout.png)
(画像はイメージです。実際の画面構成はバージョンによって若干異なります)

この画面には、いくつかの主要なペイン（領域）があります。

Elements (要素) ペイン: 現在表示されているHTML構造と、それに適用されているCSSスタイルを確認・編集できます。DOM操作の基本となる場所です。
Console (コンソール) ペイン: JavaScriptの実行結果、エラーメッセージ、そして`console.log()`などの出力が表示されます。デバッグの要となる場所です。
Sources (ソース) ペイン: プロジェクトのソースコードを表示し、ブレークポイントを設定してJavaScriptの実行を一時停止させ、変数の値などを詳細に確認できます。
Network (ネットワーク) ペイン: ページがリクエストしたリソース（HTML, CSS, JS, 画像など）とその通信状況を詳細に確認できます。パフォーマンスボトルネックの特定に不可欠です。
Performance (パフォーマンス) ペイン: ページのレンダリングやJavaScript実行にかかる時間を詳細に分析し、パフォーマンス改善のヒントを得られます。

これらのペインは、それぞれが独立した機能を持つだけでなく、相互に連携しています。例えば、Elementsペインで要素を選択した状態でConsoleペインに移動すると、その要素をJavaScriptで操作するための `$0` という特殊な変数（後述）が利用可能になります。この連携を理解することが、DevToolsを使いこなす上での第一歩です。

—

1. Elements (要素) ペイン：DOMとCSSを「触って」理解する

Elementsペインは、Webページの構造を視覚的に理解し、その場で変更を加えて即座に確認できる強力なツールです。

1.1. 要素の調査とCSSスタイルの確認・編集

1. 要素の選択:

Inspect Element (要素を調査) ツール: 画面左上の矢印アイコン（`Ctrl+Shift+C`または`Cmd+Option+C`）をクリックし、Webページ上の任意の要素をクリックすると、Elementsペインでその要素がハイライトされます。
キーボードショートカット: 非常に強力で、普段あまり意識しないかもしれませんが、このショートカットは必須です。
`Ctrl+Shift+C` / `Cmd+Option+C`: 要素調査ツールの有効化/無効化
`↑` / `↓`: 親要素・子要素への移動
`Ctrl+B` / `Cmd+B`: DOMツリーの折りたたみ/展開 (要素の親要素にフォーカス)

2. CSSスタイルの確認と編集:
Elementsペインで要素を選択すると、右側のStylesタブにその要素に適用されているCSSルールが表示されます。

プロパティの編集: 各プロパティの値を直接クリックして編集できます。例えば、`color: red;` を `color: blue;` に変更すると、即座にページ上の色が変化します。
新しいプロパティの追加: Stylesタブの末尾にある `element.style` の箇所に、新しいCSSプロパティとその値を直接入力できます。これは、CSSのデバッグや実験に非常に役立ちます。
無効化されたプロパティ: グレーアウトしているプロパティは、他のより優先度の高いルールによって無効化されています。チェックボックスのオン/オフで、そのルールの適用を一時的に無効化・有効化できます。
Computed (計算済み) タブ: 実際に要素に適用されている最終的なCSSプロパティの値を確認できます。継承された値や、ブラウザのデフォルトスタイルなども含めて網羅的に表示されます。

1.2. 実践的なデバッグ手法：意図したスタイルが当たらない場合

例えば、「このボタンの色を赤くしたいのに、なぜか青いままだ」という状況を考えてみましょう。

1. 要素の特定: まず、対象のボタンをInspect Elementツールで選択します。
2. Stylesタブの確認: Stylesタブで、`color` プロパティを探します。
3. 競合するルールの特定: もし`color: blue;` のようなルールが適用されている場合、そのルールの横に表示されているファイル名と行番号をクリックすると、Sourcesペインに遷移し、そのCSSファイルとその箇所が開きます。
4. 優先度の確認: 競合するルールが複数ある場合、Sourcesタブで各ルールの横に表示される「!」アイコン（警告）に注目します。これは、そのルールが他のルールに上書きされている可能性を示唆しています。
5. `element.style` の確認: もし `element.style` に `color: blue;` と書かれていたら、それはインラインスタイルであり、通常は他のCSSルールよりも優先されます。この場合、CSSファイル側のルールを修正しても反映されないため、インラインスタイルを削除または変更する必要があります。

隠れたショートカット:

`Ctrl+Shift+C` / `Cmd+Option+C`：要素調査ツールを素早く起動。
`Cmd+P` / `Ctrl+P` (Sourcesペインで)：ファイル名でCSSファイルを素早く検索・開く。

—

2. Console (コンソール) ペイン：JavaScriptの「対話型デバッグ」を極める

Consoleペインは、JavaScriptの実行結果、エラー、そして開発者によるメッセージを表示するだけでなく、インタラクティブにJavaScriptコードを実行できる強力なデバッグ環境です。

2.1. console.log()の進化形とデバッグの効率化

`console.log()` は最も基本的なデバッグ手法ですが、DevToolsはさらに多くの機能を提供します。

`console.warn()`: 警告メッセージを表示します。
`console.error()`: エラーメッセージを表示します。
`console.info()`: 情報メッセージを表示します。
`console.table()`: 配列やオブジェクトを整形された表形式で表示します。

// 例：ユーザーリストをテーブル表示
const users = [
{ id: 1, name: ‘Alice’, age: 30 },
{ id: 2, name: ‘Bob’, age: 25 },
{ id: 3, name: ‘Charlie’, age: 35 }
];
console.table(users);

![console.tableの例](https://example.com/console_table.png)
(画像はイメージです)

`console.group()` / `console.groupEnd()`: 関連するログメッセージをグループ化して、見やすく整理できます。

console.group(‘User Actions’);
console.log(‘User logged in.’);
console.warn(‘Password strength is weak.’);
console.groupEnd();

2.2.
2.2. $0 を使ったDOM操作
を使ったDOM操作

Elementsペインで選択した要素は、Consoleペインで `$0` という特殊な変数として参照できます。

// Elementsペインで選択した要素を取得
const selectedElement = $0;
console.log(selectedElement);

// 選択した要素のテキストを変更
selectedElement.textContent = ‘Changed Text!’;

// 選択した要素にクラスを追加
selectedElement.classList.add(‘highlight’);

これにより、DOM要素の操作をConsoleから直接、かつ素早く試すことができます。

2.3. エラーの特定とスタックトレース

JavaScriptのエラーが発生すると、Consoleペインに赤字で表示されます。エラーメッセージの横にあるリンクをクリックすると、Sourcesペインでエラーが発生したコードの箇所にジャンプし、さらにスタックトレース（エラー発生までの関数呼び出し履歴）を確認できます。これにより、エラーの原因となっている箇所を迅速に特定できます。

隠れたショートカット:

`Ctrl+L` / `Cmd+L`：Consoleのログをクリア。
`⬆️` / `⬇️`：過去に入力したコマンド履歴を辿る。
`Tab`：入力補完。変数名や関数名、`console`オブジェクトのメソッドなどを素早く入力できます。

—

3. Sources (ソース) ペイン：ブレークポイントによる「時を止める」デバッグ

Sourcesペインは、JavaScriptの実行を細かく制御し、変数の状態をリアルタイムで確認できる、最も強力なデバッグ機能を提供します。

3.1. ブレークポイントの設定と実行フローの追跡

1. ブレークポイントの設定: Sourcesペインで、デバッグしたいJavaScriptファイルを開き、コードの行番号の左側をクリックすると、ブレークポイント（実行を一時停止させる印）が設定されます。
2. 実行の停止: ページをリロードしたり、特定のイベント（ボタンクリックなど）を発生させると、コードの実行がブレークポイントで停止します。
3. ステップ実行: 実行が停止すると、画面上部に表示されるデバッグコントロールボタンを使って、コードの実行を1行ずつ進めることができます。

Resume script execution (▶️): 次のブレークポイントまで実行を続行します。
Step over next function call (↷): 現在の行を実行し、関数呼び出しの場合は関数の中には入らず、次の行に進みます。
Step into next function call (↪): 関数呼び出しの場合は、関数の中に入って実行を続けます。
Step out of current function (↩): 現在実行中の関数から抜け出し、呼び出し元に戻ります。

4. 変数の確認: 実行が停止している間、Scopeペインに現在のスコープ（ローカル変数、グローバル変数など）とその値が表示されます。変数の上にマウスカーソルを合わせるだけでも値を確認できます。Watchセクションに特定の変数を追加しておくと、常にその値を確認できます。

3.2. 条件付きブレークポイントとログポイント

常に実行を停止するのではなく、特定の条件が満たされた場合にのみ停止させたい場合があります。

条件付きブレークポイント: ブレークポイントを右クリックし、「Add conditional breakpoint…」を選択して、JavaScriptの条件式（例: `userId === 123`）を入力します。
ログポイント: ブレークポイントを右クリックし、「Add logpoint…」を選択して、ログとして出力したいメッセージや式（例: `User ID: ${userId}`）を入力します。これは、ブレークポイントを設定せずに、実行中に動的にログを出力できるため、非常に便利です。

隠れたショートカット:

`F8` / `Cmd+\`: スクリプト実行の再開/一時停止。
`F10` / `Cmd+’`: Step over。
`F11` / `Cmd+;`: Step into。
`Shift+F11` / `Cmd+Shift+;`: Step out。

—

4. Network (ネットワーク) ペイン：Webパフォーマンスの「ボトルネック」を掴む

Networkペインは、Webサイトの読み込み速度や通信状況を分析するために不可欠なツールです。

4.1. リソースの読み込み状況と通信詳細の把握

リクエスト一覧: ページが読み込まれる際に発生するすべてのアセット（HTML, CSS, JS, 画像, APIリクエストなど）が一覧表示されます。
各リクエストの詳細: リクエストをクリックすると、Headers (ヘッダー情報、リクエストURL、ステータスコードなど)、Response (サーバーからの応答)、Preview (応答のプレビュー)、Timing (通信の各段階にかかった時間) などを詳細に確認できます。
ステータスコード: `200 OK` (成功)、`404 Not Found` (見つからない)、`500 Internal Server Error` (サーバーエラー) などのステータスコードは、問題の早期発見に役立ちます。
サイズと時間: 各リクエストのサイズと、読み込みにかかった時間を確認することで、パフォーマンスのボトルネックとなっているアセットを特定できます。

4.2. パフォーマンス改善のための活用法

遅いリクエストの特定: Timingタブを確認し、特に`Waiting (TTFB)` (Time To First Byte) が長いリクエストは、サーバー側の処理に時間がかかっている可能性があります。
不要なリクエストの削減: ページ表示に不要なリソースが読み込まれていないか確認します。
キャッシュの確認: `(from disk cache)` や `(from memory cache)` と表示されているリソースはキャッシュから読み込まれており、通信時間を短縮できています。キャッシュが効いていないリソースは、キャッシュ設定の見直しを検討します。
APIリクエストのデバッグ: バックエンドAPIとの通信でエラーが発生している場合（例: 4xx, 5xxエラー）、リクエスト・レスポンスのペイロードを確認して原因を特定します。

隠れたショートカット:

`Ctrl+Shift+P` / `Cmd+Shift+P`: Networkペインのフィルタリングメニューを開く（例: `XHR` でAPIリクエストのみ表示）。
`Clear (ゴミ箱アイコン)`: ネットワークログをクリア。

—

5. Performance (パフォーマンス) ペイン：レンダリングと実行の「隠れたコスト」を暴く

Performanceペインは、Webページのライフサイクル全体（スクリプト実行、レンダリング、ペイントなど）を詳細に分析し、パフォーマンスのボトルネックを特定するための強力なツールです。

5.1. レンダリングとJavaScript実行のプロファイリング

1. 録画の開始: Performanceペインを開き、録画ボタン（●）をクリックします。
2. 操作の実行: ページのリロード、スクロール、ボタンクリックなど、分析したい操作を実行します。
3. 録画の停止: 再度録画ボタンをクリックして停止します。
4. 結果の分析: 画面に表示されるタイムラインを分析します。

Frames (フレーム): 各フレームのレンダリング時間を示します。緑色のフレームはスムーズ、黄色のフレームはレンダリングに時間がかかっていることを示唆します。
Main (メインスレッド): JavaScriptの実行、スタイル計算、レイアウト計算、ペイントなどの処理が集中するスレッドです。ここの長時間実行されているタスクは、パフォーマンスのボトルネックになりやすいです。
Network, Raster, GPUなど: 他の処理スレッドの状況も確認できます。

5.2. パフォーマンス改善のヒント

Long Tasks (長時間タスク): Mainスレッドで300ms以上実行されているタスクは、ユーザー体験を損なう可能性があります。これらのタスクを特定し、分割したり、非同期処理にしたりすることを検討します。
Recalculate Style / Layout: これらの処理に時間がかかっている場合、DOMの変更やCSSの変更が頻繁に行われている可能性があります。不要なDOM操作や、パフォーマンスに影響を与えるCSSプロパティ（例: `box-shadow`, `filter`など）の使用頻度を見直します。
Paint: ペイント処理に時間がかかっている場合、複雑な描画処理や、レイヤーの再構築が頻繁に発生している可能性があります。

隠れたショートカット:

`W` / `A`: タイムラインの水平方向のズームイン/ズームアウト。
`S` / `D`: タイムラインの垂直方向のズームイン/ズームアウト。
`Click` + `Drag`: タイムラインの特定の部分を選択して詳細表示。

—

6. Mobile Emulation (モバイルエミュレーション)：異なるデバイスでの体験をシミュレート

DevToolsは、PCブラウザだけでなく、様々なモバイルデバイスでの表示や操作をエミュレートできます。

6.1. デバイスの選択とレスポンシブデザインの検証

1. デバイスモードの有効化: DevToolsの左上にある、スマートフォンとタブレットのアイコン（`Ctrl+Shift+M` または `Cmd+Option+M`）をクリックします。
2. デバイスの選択: ドロップダウンメニューから、テストしたいデバイス（iPhone X, Pixel 2 など）を選択します。解像度やユーザーエージェントもここで変更できます。
3. レスポンシブデザインの確認: ページが選択したデバイスの画面サイズでどのように表示されるかを確認できます。メディアクエリが正しく機能しているか、レイアウト崩れがないかなどをチェックします。
4. タッチイベントのシミュレーション: モバイルデバイスではマウスカーソルがないため、タッチイベント（タップ、スワイプなど）の挙動を確認できます。

6.2. ネットワークスロットリングとパフォーマンステスト

モバイル環境では、ネットワーク速度が遅い場合が多いため、Networkペインの「 throttling (スロットリング) 」機能を使って、様々なネットワーク状況（例: Slow 3G, Fast 3G）をシミュレートできます。これにより、実際のモバイルユーザーが体験するであろうパフォーマンスを、開発環境で事前に把握し、最適化することができます。

隠れたショートカット:

`Ctrl+Shift+M` / `Cmd+Option+M`: デバイスモードのON/OFF。
`R` (デバイスモード有効時): ページのリロード。

—

7. Command Menu (コマンドメニュー)：DevToolsを「声」で操作する

DevToolsの操作をキーボードショートカットで網羅するのは大変ですが、Command Menuを使えば、あらゆる機能を素早く呼び出すことができます。

7.1. コマンドメニューの起動と活用

起動方法: `Ctrl+Shift+P` (Windows/Linux) または `Cmd+Shift+P` (Mac) を押すと、コマンド入力フィールドが表示されます。
機能の検索: ここに検索したい機能名（例: `clear console`, `reload`, `network throttling`）を入力すると、関連するコマンドが候補として表示されます。Enterキーで実行できます。
DevTools設定の変更: 「Show settings」と入力して実行すると、DevTools自体の設定画面を開くことができます。

7.2. 「Show console history」と「Show coverage」

Show console history: 過去のコンソールコマンド履歴を一覧表示し、再実行できます。
Show coverage: JavaScriptやCSSのコードカバレッジ（実際に実行・使用されたコードの割合）を表示します。未使用のコードを特定し、バンドルサイズの削減に繋げることができます。

隠れたショートカット:

`Ctrl+Shift+P` / `Cmd+Shift+P`：Command Menuの起動。
`Esc`: Command MenuまたはDevToolsペインの閉じ。

—

チーム開発で役立つ設定の共有化ルールとベストプラクティス

DevToolsの設定をチームで共有することで、開発環境の統一と、デバッグ効率の向上に繋がります。

1. 設定ファイル（JSON）による共有

Chrome DevToolsの設定は、`chrome://settings/syncSetup/advanced` からエクスポート・インポートできます。しかし、これはブラウザ全体の設定であり、プロジェクト固有の設定を共有するには向いていません。

より実践的なのは、プロジェクトのルートディレクトリに`.vscode`フォルダ（VS Codeの場合）などを置き、その中にDevTools関連の設定ファイルを置くことです。

例：VS Code の `settings.json` に DevTools 関連の設定を記述

// .vscode/settings.json
{
// DevToolsのデフォルト設定を上書きする（例：Networkタブのデフォルトスロットリング設定）
“devtools.preferences”: {
// ページ読み込み時にNetwork throttlingを有効にする（例：Fast 3G）
// “network.default-throttling-profile”: “Fast 3G”,

// コンソールにソースマップを有効にする
“current-browser-command-line-switches”: [
“–enable-source-maps”
],

// コンソールログのグループ化をデフォルトで有効にする
“console.group”: true,

// パフォーマンスパネルでの詳細なトレースを有効にする
“performance.enable-detailed-trace”: true
},

// 特定のファイルタイプに対するフォーマッター設定（例：Prettier）
“editor.defaultFormatter”: “esbenp.prettier-vscode”,
“[javascript]”: {
“editor.formatOnSave”: true
},
“[json]”: {
“editor.formatOnSave”: true
},
“[yaml]”: {
“editor.formatOnSave”: true
}

// その他、Prettierなどのリンター設定…
}

解説:

`devtools.preferences`: Chrome DevTools の内部設定をカスタマイズするためのキーです。
`network.default-throttling-profile`: Networkペインで、ページをリロードするたびに自動的に適用されるネットワークスロットリングプロファイルを設定します。開発中は「No throttling」でも良いですが、モバイルでの挙動を頻繁に確認するプロジェクトでは有効です。
`current-browser-command-line-switches`: ブラウザ起動時に渡されるコマンドラインスイッチを指定します。`–enable-source-maps` は、ソースマップが有効な場合に、DevToolsで元のソースコードを正しく表示・デバッグするために重要です。
`console.group`: コンソールログのグループ化をデフォルトで有効にします。
`performance.enable-detailed-trace`: パフォーマンスパネルで、より詳細なトレース情報を取得できるようにします。
`editor.defaultFormatter`, `[javascript]`, `[json]`, `[yaml]`: VS Code でのコードフォーマット設定です。Prettier などのフォーマッターを導入し、コードスタイルを統一することは、チーム開発において非常に重要です。

2. チーム内での共有ルール

DevTools設定のGit管理: 上記のような設定ファイルは、プロジェクトのGitリポジトリで管理し、チームメンバーに共有します。
定期的なDevToolsアップデートの確認: Chromeは頻繁にアップデートされ、DevToolsにも新機能が追加されます。チーム内で最新情報（Chrome DevTools Blogなど）を共有し、積極的に新しい機能を試す文化を醸成します。
デバッグ手法の標準化: チーム内で「この種類のバグはこのツール/手法でデバッグする」といった標準的なデバッグフローを決めると、問題解決のスピードが格段に上がります。例えば、「API通信エラーはNetworkペインで、JavaScriptのロジックエラーはSourcesペインのブレークポイントで」のように。

—

絶対に入れるべき神プラグイン（拡張機能）

DevToolsの機能を拡張する優れたChrome拡張機能は数多く存在します。ここでは、特に生産性を高めるものをいくつか紹介します。

1. React Developer Tools / Vue.js devtools:

解説: ReactやVue.jsといったモダンJavaScriptフレームワークで開発している場合、これらの拡張機能は必須です。コンポーネントツリーの確認、PropsやStateのリアルタイム編集、イベントのデバッグなどが可能になり、フレームワーク固有のデバッグが格段に容易になります。
なぜ神か: フレームワークの内部構造をDevTools上で可視化してくれるため、ブラックボックスになりがちなコンポーネント間のデータの流れや状態変化を、直感的に追跡できるようになります。

2. JSONView:

解説: Web APIなどから返されるJSONデータを、整形して見やすく表示してくれる拡張機能です。
なぜ神か: デフォルトのJSON表示は、長文になると読みにくい場合があります。JSONViewは、インデントや色付けを自動で行い、ツリー表示も可能にするため、APIレスポンスの確認作業が劇的に効率化されます。

3. Axie:

解説: GraphQL APIのデバッグに特化した拡張機能です。
なぜ神か: GraphQLのクエリやミューテーション、レスポンスを分かりやすく表示・管理できます。REST APIのPostmanのような存在であり、GraphQL開発者にとっては強力な味方となります。

インストール方法:
Chromeウェブストアで各拡張機能を検索し、「Chromeに追加」ボタンをクリックするだけです。

—

まとめ：DevToolsを「使いこなす」から「使い倒す」へ

ここまで、Chrome DevToolsの基本画面構成から、Elements, Console, Sources, Network, Performance, Mobile Emulation, Command Menuといった必須機能、さらにチーム開発での設定共有、そしておすすめの拡張機能まで、網羅的に解説してきました。

DevToolsは、単なるバグ発見ツールではありません。それは、Webページの挙動を深く理解し、パフォーマンスを最適化し、そして何よりも開発者の生産性を劇的に向上させるための強力な武器です。

今日ご紹介した機能やテクニックを、ぜひ明日からの開発で実践してみてください。最初は戸惑うかもしれませんが、使い込むほどにその真価を実感できるはずです。

開発プロジェクトの優秀なテックリードとして、皆さんのチームがDevToolsを「使いこなす」レベルから「使い倒す」レベルに到達し、より創造的で効率的な開発ができるようになることを心から願っています。

Happy Debugging!

【2024年版】Chrome DevTools完全ガイド：フロントエンド開発者が最初に覚えるべき必須機能7選 – 開発スピードを劇的に高める実践テクニック

DevToolsの基本画面構成と「なぜ」を理解する

1. Elements (要素) ペイン：DOMとCSSを「触って」理解する

1.1. 要素の調査とCSSスタイルの確認・編集

1.2. 実践的なデバッグ手法：意図したスタイルが当たらない場合

2. Console (コンソール) ペイン：JavaScriptの「対話型デバッグ」を極める

2.1. console.log()の進化形とデバッグの効率化

2.2. 2.2. $0 を使ったDOM操作 を使ったDOM操作

2.2. $0 を使ったDOM操作

2.3. エラーの特定とスタックトレース

3. Sources (ソース) ペイン：ブレークポイントによる「時を止める」デバッグ

3.1. ブレークポイントの設定と実行フローの追跡

3.2. 条件付きブレークポイントとログポイント

4. Network (ネットワーク) ペイン：Webパフォーマンスの「ボトルネック」を掴む

4.1. リソースの読み込み状況と通信詳細の把握

4.2. パフォーマンス改善のための活用法

5. Performance (パフォーマンス) ペイン：レンダリングと実行の「隠れたコスト」を暴く

5.1. レンダリングとJavaScript実行のプロファイリング

5.2. パフォーマンス改善のヒント

6. Mobile Emulation (モバイルエミュレーション)：異なるデバイスでの体験をシミュレート

6.1. デバイスの選択とレスポンシブデザインの検証

6.2. ネットワークスロットリングとパフォーマンステスト

7. Command Menu (コマンドメニュー)：DevToolsを「声」で操作する

7.1. コマンドメニューの起動と活用

7.2. 「Show console history」と「Show coverage」

チーム開発で役立つ設定の共有化ルールとベストプラクティス

1. 設定ファイル（JSON）による共有

例：VS Code の `settings.json` に DevTools 関連の設定を記述

2. チーム内での共有ルール

絶対に入れるべき神プラグイン（拡張機能）

まとめ：DevToolsを「使いこなす」から「使い倒す」へ

2.2.
2.2. $0 を使ったDOM操作
を使ったDOM操作