Zenn
🔖

簡単にNetworkタブについてまとめてみた

に公開
tech
tech

はじめに

こんにちは！WebサイトやWebアプリケーションを作っていると、「あれ、画像がうまく表示されないな」「なんだかページの読み込みが遅い気がする…」「ボタンを押してもデータが送られていない？」といった問題に直面することがありますよね。

そんな時、私たちの強力な味方になってくれるのが、Google Chrome に組み込まれている「デベロッパーツール (DevTools)」です。そして、その中でも特に「Network (ネットワーク)」タブは、Webページがどのようにインターネット上のサーバーと通信しているかを"丸裸"にしてくれる、非常に重要なツールなのです。

この記事では、デベロッパーツールの「Network」タブで一体何ができるのか、どんな情報が見られるのか、そしてそれがWebサイト制作やデバッグ（問題解決）にどう役立つのかを分かりやすく解説していきます。Networkタブを使いこなして、Web開発のレベルアップを目指しましょう！

1. Network タブを開いてみよう

まずは、Networkタブを開くところから始めましょう。

  1. デベロッパーツールを開く: Chromeで調査したいWebページを開いた状態で、以下のいずれかの方法でデベロッパーツールを起動します。
    • F12 キー を押す (Windows/Linux)
    • Option + Command + I を押す (Mac)
    • ページ上で 右クリック して「検証」または「要素を調査」を選択
    • Chromeのメニュー（︙）> その他のツール > デベロッパーツール
  2. Network タブを選択: デベロッパーツールが開いたら、上部にあるタブの中から「Network」をクリックします。

ポイント: ネットワークの通信状況を正確に記録するためには、調査したいページを読み込む（リロードする）前に Network タブを開いておくのがおすすめです。

2. 何が見える？ Network タブの基本画面

Networkタブを開いてページをリロードすると、そのページの表示に必要な様々なファイル（HTML, CSS, JavaScript, 画像など）が、サーバーからどのようにダウンロードされたかの記録（リクエストのリスト）がずらっと表示されます。

主な表示項目を見ていきましょう。

① リクエストのリスト（表形式）

画面の大部分を占めるのが、このリストです。ページが表示されるまでに行われたネットワーク通信（リクエストとレスポンス）が、1行＝1通信として表示されます。

  • Name: リクエストされたファイルの名前やURLの一部が表示されます。クリックすると詳細が見られます。
  • Status: HTTPステータスコード。通信が成功したか、失敗したかなどを示します。
    • 200 OK: 成功！リクエストは正常に処理されました。
    • 304 Not Modified: コンテンツは更新されていないため、ブラウザのキャッシュ（一時保存データ）が使われました。
    • 404 Not Found: サーバー上にファイルが見つかりませんでした（URL間違いなど）。
    • 500 Internal Server Error: サーバー側で何か問題が発生しました。
  • Type: リクエストされたリソースの種類（document, stylesheet, script, image, Workspace, xhr など）。
  • Initiator: このリクエストが開始されたきっかけ（例: HTMLパーサーがCSSファイルを要求、JavaScriptがAPIを呼び出し）。クリックすると、関連するコードの箇所にジャンプできることもあります。
  • Size: ファイルのサイズ。10 KB / 100 KB のように表示されている場合、10 KB が実際に転送されたサイズ（圧縮されている場合など）、100 KB が元のファイルサイズを示します。
  • Time: リクエストが開始されてから完了するまでの時間。
  • Waterfall: 各リクエストのタイミングを視覚的に示したグラフ。リクエストがどのくらいの時間、何に待たされていたか（キューイング、DNS検索、接続、SSL、リクエスト送信、サーバーの応答待ち、ダウンロード）を分析できます。ボトルネック（処理が遅い原因）を見つけるのに役立ちます。

② 概要 (Summary)

リストの下部には、ページ全体の通信に関する概要が表示されます。

  • リクエストの総数
  • 転送されたデータ量 (圧縮後 / 圧縮前)
  • ページ読み込み完了までの時間 (Finish)
  • DOMContentLoaded イベント発火までの時間 (HTMLの解析が完了し、DOMツリーが構築された時点)
  • Load イベント発火までの時間 (画像などすべてのリソースの読み込みが完了した時点)

3. 見たい情報だけを表示！ フィルタリングと検索

ページによっては、リクエストの数が非常に多くなることがあります。特定の通信だけを効率よく見つけるために、フィルタリング機能を活用しましょう。

  • テキストフィルター: 上部にある「Filter」入力欄にファイル名やドメインの一部などを入力すると、それに一致するリクエストだけが表示されます。
  • タイプリスナー: 「Fetch/XHR」「JS」「CSS」「Img」などのボタンを押すと、その種類のリソースに絞り込めます。「XHR」や「Fetch」は、JavaScriptから行われるデータ通信（API呼び出しなど）を指します。
  • その他のフィルター: status-code:404 のように特定のステータスコードで絞り込んだり、method:POST でHTTPメソッドを指定したり、様々な条件でフィルタリングできます。

4. 個別のリクエストを徹底解剖！ 詳細パネル

リストの中から特定のリクエスト（例えば、気になる画像ファイルやAPI呼び出し）をクリックすると、画面右側（または下側）にそのリクエストの詳細情報が表示されます。ここにはさらに詳しい情報がタブ形式で格納されています。

  • Headers (ヘッダー):
    • 最も重要なタブの一つです。ブラウザがサーバーに送った「リクエストヘッダー」と、サーバーから返ってきた「レスポンスヘッダー」が表示されます。
    • URL、リクエストメソッド (GET, POSTなど)、ステータスコード、コンテンツの種類 (Content-Type)、キャッシュの制御 (Cache-Control)、通信相手のIPアドレスなど、通信の核心となる情報が詰まっています。
  • Payload (ペイロード): (主に POST, PUT リクエストの場合)
    • ブラウザからサーバーへ送信されたデータ（フォームの内容など）が表示されます。
  • Preview (プレビュー):
    • サーバーからの応答 (レスポンス) を分かりやすく表示しようと試みます。例えば、JSONデータなら整形されてツリー表示されたり、画像ならプレビューが表示されたりします。
  • Response (レスポンス):
    • サーバーから返ってきた生のデータ（HTMLソース、CSSコード、JSONデータなど）が表示されます。APIの応答内容を確認するのによく使います。
  • Initiator (イニシエーター):
    • このリクエストがどこから呼び出されたかの詳細な情報（コールスタック）が表示されます。どのJavaScriptコードがこの通信を開始したのか追跡するのに役立ちます。
  • Timing (タイミング):
    • Waterfallグラフで表示されていた内容の、より詳細な数値データ（キューイング、待機、DNS、接続、SSL、送信、応答待ち(TTFB)、ダウンロードにかかった時間）が表示されます。特に TTFB (Time To First Byte) は、サーバーが最初の1バイトを返すまでの時間で、サーバー側の処理速度の指標になります。
  • Cookies (クッキー):
    • このリクエストで送受信されたクッキーの情報が表示されます。

5. 通信速度をシミュレーション！ スロットリング

「Network」タブの上部にあるドロップダウンリスト（通常 "No throttling" になっている所）を使うと、意図的にネットワークの通信速度を遅くしたり、オフライン状態をシミュレーションしたりできます。

  • Fast 3G / Slow 3G: スマートフォンなど遅い回線での表示速度をテストできます。
  • Offline: ネットワーク接続がない状態での動作（Service Workerによるキャッシュ表示など）を確認できます。

これにより、様々な環境のユーザーが快適にサイトを利用できるかを確認できます。

6. キャッシュを無効化！

「Disable cache」というチェックボックスをオンにすると、ブラウザのキャッシュ（一度読み込んだファイルを一時的に保存しておく機能）が無効になります。

  • 使い所: CSSやJavaScriptを変更したのに表示が変わらない場合、キャッシュが原因かもしれません。これをオンにしてリロードすれば、必ずサーバーから最新のファイルを取得しにいくため、変更が反映されているか確認できます。また、初めてページを訪れたユーザーの読み込み速度を測定するのにも役立ちます。
  • 注意点: この機能は、デベロッパーツールが開いている間だけ 有効です。

7. その他の便利な機能（一部）

Networkタブには他にもたくさんの機能があります。

  • Preserve log: ページ遷移してもログを保持します。ログイン処理など、複数のページにまたがる操作をデバッグする際に便利です。
  • スクリーンショット: ページ読み込み中の画面変化を記録できます。（フィルムストリップのような表示）
  • HARファイルのインポート/エクスポート: ネットワークログ全体をファイル(.har)として保存したり、読み込んだりできます。他の人と問題を共有したり、後で分析したりするのに使えます。
  • リクエストのブロック: 特定のファイルやドメインへのリクエストをブロックして、それがページの表示や動作に与える影響をテストできます。

8. Network タブは何の役に立つの？（まとめ）

Networkタブを使うことで、開発者は以下のようなことができるようになります。

  • 読み込みエラーの解決: どのファイルが404 (Not Found) や 500 (Server Error) になっているか特定し、原因を調査する。
  • 表示速度の分析と改善: どのファイルのダウンロードに時間がかかっているか、サーバーの応答が遅い(TTFBが大きい)箇所はどこか、などをWaterfallグラフやTimingタブで分析し、改善策を考える。
  • API通信の確認: JavaScript (Fetch/XHR) がサーバーと正しくデータを送受信できているか、リクエストヘッダー、ペイロード、レスポンスヘッダー、レスポンスボディを確認する。
  • キャッシュ動作の検証: 意図した通りにファイルがキャッシュされているか、304 Not Modified ステータスやレスポンスヘッダーを見て確認する。
  • リソース依存関係の理解: ページがどのような順番でファイルを読み込んでいるかを知る。
  • 異なるネットワーク環境でのテスト: スロットリング機能を使って、遅い回線でのパフォーマンスを確認する。

おわりに

Chromeデベロッパーツールの「Network」タブは、Webページとサーバー間の通信を可視化し、分析するための非常に強力なツールです。最初は情報量が多くて圧倒されるかもしれませんが、まずは今回紹介した基本的な見方や使い方から試してみてください。

ページの読み込みが遅い原因を探ったり、API連携がうまくいかない原因を特定したりと、Web開発における問題解決の多くの場面で、Networkタブはあなたの助けとなってくれるはずです。

Discussion