ネットワークモニターは、現在のページが行うすべてのネットワークリクエストをキャプチャして表示します。XHR/Fetch API 呼び出し、スクリプトの読み込み、スタイルシートの取得、画像のダウンロード、フォントファイルなどが対象です。URL、HTTP メソッド、ステータスコード、レスポンスサイズ、タイミングをリアルタイムで更新されるフローティングパネルに表示します。ブラウザの DevTools を開く必要はありません。
Chrome DevTools のネットワークタブは強力ですが重量級です。大きなスペースを占有し、ナビゲーション時にリセットされ、ページコンテンツから目を離す必要があります。ネットワークモニターは、ページ上に重ねて表示される軽量なフローティングパネルで、主要なネットワーク監視機能を提供します。XHR および Fetch リクエストをインターセプトし、Performance API 経由でリソース読み込みを監視して、リクエストが発生するたびにリアルタイムで表示します。各リクエストには URL、HTTP メソッド（GET、POST、PUT、DELETE）、ステータスコード（色分け表示: 2xx は緑、3xx は黄、4xx/5xx は赤）、レスポンスサイズ（バイト）、所要時間（ミリ秒）が表示されます。任意のリクエストをクリックすると詳細を展開できます: リクエストヘッダー、レスポンスヘッダー、リクエストペイロード（POST/PUT の場合）、レスポンスボディのプレビュー、タイミングの内訳。タイプ別フィルター（XHR/Fetch、JS、CSS、Images、Fonts）で特定のトラフィックに絞り込めます。
すべてのネットワークリクエストは、発生した瞬間にパネルに表示されます。ページ読み込み、API 呼び出し、遅延読み込みリソース、バックグラウンドの Fetch が対象です。手動リフレッシュは不要で、フィードはリアルタイムで更新されます。
任意のリクエストをクリックすると詳細情報を確認できます: リクエスト URL、メソッド、ヘッダー、ペイロード（POST/PUT の場合）、レスポンスヘッダー、レスポンスボディのプレビュー（JSON は自動フォーマット）、ステータスコード、サイズ、タイミングの内訳。
リクエストをタイプ別にフィルタリングできます: XHR/Fetch（API 呼び出し）、JS（スクリプト）、CSS（スタイルシート）、IMG（画像）、Font（ウェブフォント）、またはすべて。API トラフィックをリソース読み込みから切り離して、必要な情報に集中できます。
ステータスコードは一目で識別できるよう色分けされています: 2xx（成功）は緑、3xx（リダイレクト）は黄、4xx（クライアントエラー）および 5xx（サーバーエラー）は赤。失敗したリクエストはすぐに確認できます。
各リクエストにはレスポンスサイズ（KB）と合計所要時間（ミリ秒）が表示されます。遅い API 呼び出し、サイズの大きいリソース、ページパフォーマンスに影響する不要なリクエストを特定できます。
サマリーバーには、キャプチャされたすべてのリクエストの合計数と合計サイズが表示されます。フィルターを適用すると、タイプ別の合計も確認できます。スクリプト、画像、API 呼び出しそれぞれの帯域幅消費量を把握できます。
XHR/Fetch リクエストを監視して、フロントエンドが正しい API エンドポイントを適切なパラメーターで呼び出しているか確認します。リクエストペイロードとレスポンスボディをクリックして検査し、データ形式の不一致を即座に発見できます。
赤い 404 および 500 エントリーが壊れたリソースや失敗した API 呼び出しをすぐに示します。失敗している URL、発生タイミング、サーバーが返すエラーレスポンスを確認できます。
所要時間でソートして最も遅いリクエストを見つけます。サイズでソートして最も大きいリソースを見つけます。サマリーの合計でページ全体の帯域幅の状況を把握できます。リクエスト数が多すぎるのか、データのダウンロードが多すぎるのかを判断できます。
ページがバックグラウンドで行っているネットワークリクエストを確認します。アナリティクスの ping、ハートビート呼び出し、ポーリングリクエスト、遅延読み込みリソースなど。ユーザーに見えない部分も含めた、ページの完全なネットワークアクティビティを把握できます。
リクエストをフィルタリングして、どのドメインに接続しているかを確認します。予期しないネットワーク呼び出しを行っているサードパーティスクリプトを特定します。トラッキングピクセル、データ収集、把握していない外部 API 呼び出しなどを発見できます。
DevSuite Pro のフローティングドックを開き、ネットワークモニターのアイコンをクリックします。パネルが開き、直ちにネットワークリクエストのキャプチャを開始します。
通常通りページを操作してください。API 呼び出し、リソースの読み込み、バックグラウンドの Fetch など、すべてのネットワークリクエストがフィードに表示されます。
タイプフィルター（XHR、JS、CSS、IMG、Font）をクリックして表示を絞り込みます。API 呼び出しのみ表示してデータ取得をデバッグしたり、画像のみ表示してアセット読み込みを確認したりできます。
任意のリクエスト行をクリックして詳細を展開します: URL、ヘッダー、ペイロード、レスポンスボディ、ステータスコード、サイズ、タイミング。
赤いステータスコード（404、500）は失敗したリクエストを示します。長い所要時間はパフォーマンスのボトルネックを示し、大きなサイズは最適化が必要なリソースを示します。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
