ブラウザ開発者ツール（DevTools） とは？

Webページの裏側を全部見られる。HTMLの構造を見たり、CSSを変えて見た目を試したり、JavaScriptのエラーを確認したり、どんな通信が行われているか調べたりできる。Web開発者が毎日使う必須ツール。

ほとんどのブラウザでF12キーを押すか、右クリックして「検証」を選ぶと開く。Macなら Cmd+Option+I でも開ける。Elementsタブ、Consoleタブ、Networkタブ、Sourcesタブなどがあり、それぞれ違う機能を持っている。

ある。たとえば「このサイトのフォントは何？」「この色のカラーコードは？」と調べたり、広告ブロッカーの動作を確認したりもできる。Networkタブで通信が遅い原因を調べるのはパフォーマンス改善の基本。Lighthouseタブでページの品質スコアを測ることもできる。

まず覚えるべきは「要素の検査（Ctrl+Shift+C）」でクリックした要素のCSSをリアルタイム編集できること。次にNetworkタブの「Throttling」で低速回線をシミュレートしてパフォーマンスを確認できるよ。実はConsoleタブで「$0」と打つと直前にElementsタブで選択した要素を取得できるし、「copy(JSON.stringify(data))」でオブジェクトをクリップボードにコピーできるんだ。さらにSourcesタブの「Conditional Breakpoint」は、特定条件のときだけ止まるブレークポイントで、ループの100回目だけ止めたい場合などに超便利だよ。