今回やること
この記事では、DevToolsのNetworkパネルを使って、ページ読み込みやAPI通信を確認します。
Networkは「ブラウザが何を取りに行き、何に失敗したか」を見る場所です。
Step 1: Networkを開いてリロードする
Chromeでページを開き、DevToolsを表示します。
Cmd/Ctrl + Shift + I
Networkタブを開いたら、ページをリロードします。
Cmd/Ctrl + R
Networkは、開いた後の通信を記録します。先にNetworkを開いてからリロードするのが基本です。
Step 2: 赤い行を見る
読み込みに失敗したリクエストは、赤く表示されることがあります。
見る項目:
- Name
- Status
- Type
- Size
- Time
たとえば、画像が404なら次のように見えます。
logo.png 404 png 0 B
この場合、画像ファイルのパスや配置を確認します。
Step 3: Statusを見る
Statusは、HTTPの結果です。
| Status | 意味 |
|---|---|
| 200 | 成功 |
| 301/302 | リダイレクト |
| 304 | キャッシュ利用 |
| 400 | リクエストが不正 |
| 401 | 認証が必要 |
| 403 | 権限がない |
| 404 | 見つからない |
| 500 | サーバ内部エラー |
まずは、失敗しているリクエストのStatusを見ます。
Step 4: Headersを見る
リクエストをクリックすると、詳細が表示されます。Headersでは、URLや送受信ヘッダーを確認できます。
見る項目:
- Request URL
- Request Method
- Status Code
- Response Headers
- Request Headers
APIが失敗している時は、Request URLが正しいか、MethodがGETなのかPOSTなのかを確認します。
Step 5: Responseを見る
Responseタブでは、サーバから返ってきた中身を見られます。
JSON APIなら、エラーメッセージが返っていることがあります。
{
"message": "token is expired"
}
画面には「通信に失敗しました」としか出ていなくても、Responseを見ると原因が書かれていることがあります。
Step 6: SizeとWaterfallを見る
表示が遅い時は、SizeとWaterfallを見ます。
確認すること:
- 画像が大きすぎないか
- JSやCSSが大きすぎないか
- 外部CDNの読み込みが遅くないか
- 同じファイルを何度も読んでいないか
画像が数MBある場合、最初の表示が遅くなる原因になります。
Step 7: フィルターを使う
Networkにはフィルターがあります。
| フィルター | 見るもの |
|---|---|
| Fetch/XHR | API通信 |
| JS | JavaScript |
| CSS | CSS |
| Img | 画像 |
| Doc | HTML |
APIだけ見たい時は、Fetch/XHRに切り替えると探しやすくなります。
ポイント: Networkでは「どのURL」「何番のstatus」「返ってきた中身」をセットで見ます。
まとめ
DevTools Networkは、通信の事実を見る場所です。画面だけでは分からない404、500、CORS、画像の重さ、APIレスポンスを確認できます。
表示が遅い、画像が出ない、APIが動かない時は、まずNetworkを開いてリロードします。
