5.1 通信監視の基本

Networkパネルを開く

1. F12でDevToolsを開く
2. 「Network」タブをクリック
3. ページをリロードして通信を記録開始

パネル構成

ツールバー

リクエスト一覧

各リクエストが行形式で表示される。列の内容：

列のカスタマイズ

列ヘッダーを右クリックで、表示する列を選択できる。

リクエスト詳細

リクエストをクリックすると、詳細パネルが表示される。

Headers（ヘッダー）

Payload（ペイロード）

POSTリクエストなどで送信したデータ。

• Query String Parameters: URLパラメータ
• Form Data: フォームデータ
• Request Payload: JSONなどのボディ

Preview（プレビュー）

レスポンスの整形表示。JSONは展開可能なツリー、HTMLはレンダリング、画像はプレビュー表示。

Response（レスポンス）

レスポンスボディの生データ。

Initiator（イニシエーター）

リクエストを発生させたコードのスタックトレース。どのスクリプトがこのリクエストを呼んだか追跡できる。

Timing（タイミング）

リクエストの各フェーズにかかった時間。詳細は5.2 Waterfall分析を参照。

Cookies（クッキー）

送受信されたCookieの一覧。

フィルタリング

タイプフィルタ

ツールバーのボタンでリソースタイプを絞り込み。

• Fetch/XHR: API通信（最もよく使う）
• JS: JavaScriptファイル
• CSS: スタイルシート
• Img: 画像
• Doc: HTMLドキュメント
• WS: WebSocket通信

テキストフィルタ

Filterボックスに入力してURLやファイル名で絞り込み。

フィルタコマンド

// ドメインで絞り込み
domain:api.example.com

// 特定のメソッドのみ
method:POST

// 特定のステータスコード
status-code:404

// サイズでフィルタ
larger-than:1M

// ブロックされたリクエスト
is:blocked

// キャッシュからのリクエスト
is:from-cache

// サードパーティ
-domain:example.com

// 複数条件
domain:api.example.com method:POST

反転フィルタ

「Invert」チェックボックスでフィルタ条件を反転。

サードパーティリクエストを非表示

「3rd-party requests」チェックボックスで外部ドメインへのリクエストを非表示。

コピー操作

リクエストを右クリックで様々な形式でコピーできる。

リクエストの再送

リクエストを右クリック → 「Replay XHR」で同じリクエストを再送信できる。

編集して再送

「Copy as fetch」でコードをコピーし、Consoleで編集して実行。パラメータを変えてAPIをテストする際に便利。

リクエストのブロック

特定のリクエストをブロックして、読み込めない状況をシミュレート。

設定方法

ブロックパターンの管理

Network request blocking（Ctrl+Shift+P → "Show Network request blocking"）でパターンを追加・管理できる。

レスポンスのオーバーライド

リクエストを右クリック → 「Override content」でレスポンスを差し替え。詳細は4.4 Local Overridesを参照。

ネットワークログの検索

Ctrl+Fですべてのリクエスト/レスポンスを横断検索。

// 特定のAPIレスポンスを検索
"user_id": 123

// エラーメッセージを検索
"error"

エクスポート/インポート

HAR形式でエクスポート

ログを右クリック → 「Save all as HAR with content」でHTTP Archive形式で保存。

HARのインポート

Networkパネルにドラッグ&ドロップでHARファイルを読み込み。過去の通信ログを分析する際に便利。