🎚️
Chrome DevToolsの Network/パフォーマンスタブ
フロントエンド向けネットワークタブとパフォーマンスタブの使い方
Google Chrome で F12 キーを押すと、デベロッパーツールが起動する
| タブ名 | 説明 |
|---|---|
| Elements | HTMLやCSSの確認、編集 |
| Console | JavaScriptのログ確認、実行 |
| Sources | JavaScriptのソースコード確認、デバッグ |
| Network | ネットワークリクエストの確認 |
| Performance | パフォーマンスの計測 |
| Memory | メモリ使用量の確認 |
| Application | ローカルストレージやクッキーの確認 |
| Lighthouse | ウェブページのパフォーマンス監査 |
ネットワークタブ
- 赤枠：通信のタイプとタイプ別の絞り込み
- SPA における API の応答は、
Fetch/XHRで絞り込めば OK
- SPA における API の応答は、
- 緑枠（グラフペイン）：何の通信がどのタイミングでどのくらいの期間実行されたか
- 青枠（テーブルペイン）：各通信のプロパティ
- 一番上の列が最初に実行された通信となる
- 列の項目は「右クリック > ヘッダーオプション」で切り替え可能
ネットワークタブ 詳細情報
青枠の各行の「名前」列をクリックすると通信の詳細を表示できる
まずは ★ の部分から確認できれば OK
- ヘッダタブ ★：HTTP リクエストとレスポンスのヘッダ情報
- プレビュータブ：画像系のレスポンスを表示する
- レスポンスタブ ★；HTTP レスポンスのボディを表示する
- イニシエータタブ：対象の通信の呼び出し元のスタックトレース
- タイミングタブ：対象の通信の実行タイミング
- Cookie タブ；リクエストの HTTP ヘッダーで送信された Cookie 情報
ネットワークタブ cURL コマンドでのコピー
同じ値で API を再実行したいときに使うと便利
対象の通信を右クリック > コピー > cURL としてコピー
パフォーマンスタブ
Web ページをブラウザが受信してから描画するまでの一連の流れを計測できる
パフォーマンスタブ使い方
- 計測対象の開始ページへ遷移しパフォーマンスタブを開く
- 「記録」ボタンを押す
- 計測対象の操作を行う
- ダイアログの「停止」ボタンを押す
- 計測結果が表示される
パフォーマンス 計測結果の見方
Zenn の https://zenn.dev/slopwelljp から https://zenn.dev/slopwelljp/articles/9252e320880790 へ遷移した際の計測結果を例に説明する
Step1. フレームペインを開き、対象の操作の範囲を絞り込む
Step2. 絞り込むと、その範囲の情報が詳細に表示される
Step3. メインペインのトラックで、特定のタイミングに実行していた JS 関数を確認し、ボトルネックを特定する
※画像は本番ビルドにあたるため、関数名が難読化されているが、開発ビルドであれば関数名がそのまま表示されるはず
公式
「AI を使用してデバッグ」なるものが追加されててびっくり
Gemini なのかな？
Discussion