Developer Tools: DevToolsの開き方と使い方

最新のブラウザーには、開発者向けツールが標準で組み込まれています。DevToolsを使うと、HTMLとCSSの調査、JavaScriptのデバッグ、パフォーマンスのプロファイリング、ネットワークリクエストの監視などを、ブラウザーを離れずに行えます。

F12（Windows/Linux）またはCmd+Option+I（Mac）でDevToolsを開けます。要素を右クリックしてInspectを選択することもできます。Ctrl+Shift+J / Cmd+Option+Jというショートカットを使うと、Consoleを直接開けます。

Elementsパネルには、現在のDOMツリーが表示されます。要素をクリックして選択すると、Stylesペインで計算済みスタイルを確認できます。HTMLやCSSの値をダブルクリックするとリアルタイムで編集できますが、変更はすぐに反映されるだけで、ファイルには保存されません。

Stylesペインでプロパティの値をクリックすると変更できます。+ボタンで新しいルールを追加できます。切り替え用のチェックボックスを使うと、ルールを無効にできます。エディターに切り替えずにCSSのプロトタイプを作成する最速の方法です。

Consoleには、ログメッセージ、警告、エラーが表示されます。JavaScriptを直接入力して実行することもできます。デバッグ中にデータを出力するには、console.log()、console.warn()、console.error()、console.table()を使います。

Networkパネルには、ページが行うすべてのHTTPリクエストが表示されます。リクエストを選択すると、ヘッダーを確認し、レスポンス本文をプレビューし、タイミングのウォーターフォールを確認できます。XHR/Fetch、JS、CSS、Images、Fontsなど、種類でフィルタリングできます。

各リクエストには、Queued、DNS Lookup、Initial Connection、SSL、Request Sent、Waiting (TTFB)、Content Downloadが表示されます。TTFB（Time To First Byte）は、サーバーのレスポンス時間を表します。

Networkパネルのスロットリング用ドロップダウンを使うと、低速な3Gやオフラインの状態をシミュレートできます。高速なブロードバンドでは見えないパフォーマンスの問題が明らかになり、接続状態の悪いユーザーにも機能する体験を構築するのに役立ちます。

デバイスアイコン（Ctrl+Shift+M / Cmd+Shift+M）をクリックすると、Device Modeに切り替えられます。モバイルのビューポート、DPR、タッチイベント、ネットワーク状態をシミュレートできます。iPhone 14などのプリセットから選ぶことも、幅をカスタム設定することもできます。

Sourcesパネルでは、JavaScriptファイルを読み込んだり、ブレークポイントを設定したりできます。ブレークポイントを設定すると実行が一時停止するため、変数の値やコールスタックを確認し、F10（step over）とF11（step into）でコードを1行ずつ実行できます。

Sourcesで行番号をクリックすると、ブレークポイントを追加できます。実行が一時停止したら、変数にカーソルを合わせて値を確認するか、Consoleに変数名を入力してください。Call Stackペインでは、この箇所に到達するまでに呼び出された関数を確認できます。

Elements：ライブDOMを検査して編集します。Console：JavaScriptを記録して実行します。Network：HTTPトラフィックを監視します。Sources：ブレークポイントを設定してデバッグします。Device Mode：レスポンシブレイアウトをテストします。これら4つのパネルを使いこなすと、デバッグの進め方が大きく変わります。