【実践編】ChromeのネットワークタブでAPI通信をデバッグする方法【実務で使えるテクニック】

はじめに：実務でこんな困りごとはありませんか？

フロントエンド開発の現場では、こんな問題に直面することがよくあります。

• 「APIを呼んだのに404エラーが出る…どこが間違ってる？」
• 「CORSエラーって表示されたけど、何をどうすればいいの？」
• 「画面の読み込みが遅い…どこがボトルネックなんだろう？」
• 「リクエストは送れてるはずなのに、レスポンスがおかしい…」

これらの問題を解決する鍵が、Chromeデベロッパーツールのネットワークタブです。

この記事では、ネットワークタブの具体的な操作方法と、実務でよくあるトラブルの解決方法を、実際の画面とコード例を交えて詳しく解説します。

※この記事は実践編です。HTTP通信の基礎から学びたい方は、まず【基礎編】Chromeデベロッパーツールのネットワークタブとは？をご覧ください。

ネットワークタブの開き方と基本操作

開き方

1. デベロッパーツールを開く（F12 または Ctrl + Shift + I / Cmd + Option + I）
2. 上部タブに「ネットワーク」があればクリック
3. なければ「>>」をクリックして「ネットワーク」を選択

重要な初期設定

ネットワークタブを開いたら、まず以下の設定を確認しましょう。

1. ログを保持

チェックボックス： ネットワークタブ上部の「ログを保持」

用途： ページ遷移やリロード時もログを残す

• ✅ チェックON：ページ遷移してもログが残る（推奨）
• ❌ チェックOFF：ページ遷移でログが消える

こんな時に必須：

• フォーム送信後にリダイレクトされる場合
• ログイン処理など、ページ遷移を伴う処理
• 複数ページにまたがる通信を追跡したい場合

2. キャッシュを無効化

チェックボックス： ネットワークタブ上部の「キャッシュを無効化」

用途： 常に最新のファイルを取得する

• ✅ チェックON：キャッシュを使わず、毎回サーバーから取得（開発時推奨）
• ❌ チェックOFF：ブラウザキャッシュを使用

こんな時に必須：

• CSS・JSを更新したのに反映されない
• API のレスポンスがキャッシュされて古いデータが表示される
• 開発中に最新の状態を常に確認したい

注意： キャッシュを無効化は、デベロッパーツールが開いている間のみ有効です。

基本操作

記録の開始・停止

ネットワークタブ左上の●（赤い丸）ボタンで記録のON/OFFを切り替えられます。

• 赤色： 記録中（デフォルト）
• グレー： 記録停止中

基本的には記録ONのままで問題ありません。

ログのクリア

ネットワークタブ左上の🚫（禁止マーク）ボタンをクリックすると、現在のログをすべてクリアできます。

ショートカット： Ctrl + L（Windows）/ Cmd + K（Mac）

使いどころ： 特定の操作だけを記録したい時、ログが多すぎて見づらい時

リクエストの詳細確認方法

リクエスト一覧の見方

ネットワークタブには、ページで発生したすべての通信が一覧表示されます。各列の意味を理解しましょう。

リクエストの詳細を見る

リクエスト一覧から任意の行をクリックすると、右側または下部に詳細パネルが表示されます。

ヘッダータブ：リクエスト・レスポンスヘッダー

確認できる情報：

• 全般： リクエストURL、メソッド、ステータスコード、リモートアドレス
• レスポンスヘッダー： サーバーから返されたヘッダー
• リクエストヘッダー： ブラウザが送信したヘッダー

実際の例：

全般:
  リクエスト URL: https://api.example.com/users/123
  リクエスト メソッド: GET
  ステータス コード: 200 OK
  リモート アドレス: 203.0.113.1:443

レスポンス ヘッダー:
  Content-Type: application/json; charset=utf-8
  Access-Control-Allow-Origin: *
  Cache-Control: no-cache
  Content-Length: 458

リクエスト ヘッダー:
  Accept: application/json
  Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
  User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
  Referer: https://example.com/dashboard

プレビュータブ：レスポンスのプレビュー

サーバーから返されたデータを整形して見やすく表示します。

• JSON： ツリー形式で展開可能
• HTML： レンダリングされた状態
• 画像： 画像が表示される

使いどころ： APIレスポンスの中身を素早く確認したい時

レスポンスタブ：生のレスポンスデータ

サーバーから返された生データをそのまま表示します。

使いどころ：

• レスポンスをコピーして他のツールで使いたい
• 細かい文字列を確認したい
• プレビューで表示されない場合

イニシエータタブ：呼び出し元

このリクエストがどこから呼ばれたかを確認できます。

• 呼び出し元のファイル名と行番号
• コールスタック（関数の呼び出し履歴）

使いどころ： 「どのコードがこのAPIを呼んでいるか分からない」時に便利

タイミングタブ：時間の内訳

通信にかかった時間の詳細な内訳を確認できます。これは非常に重要です。

タイミングタブの各フェーズ：

重要： サーバーの応答を待機しています （TTFB）が長い場合はサーバー側の問題、コンテンツのダウンロードが長い場合はデータサイズや通信速度の問題です。

フィルター機能の使い方

リクエストが多すぎて見づらい時は、フィルター機能を活用しましょう。

リクエストタイプ別フィルタ

ネットワークタブ上部のボタンで、表示するリクエストを絞り込めます。

よく使うフィルタ：

• Fetch/XHR： API通信だけを見たい時（最頻出）
• JS： JavaScriptファイルの読み込みを確認したい時
• 画像： 画像の読み込み状況を確認したい時

検索機能

フィルタ入力欄に文字列を入力すると、リクエストURLに含まれる文字列で検索できます。

例：

• api と入力 → URLに「api」を含むリクエストのみ表示
• user と入力 → URLに「user」を含むリクエストのみ表示

ステータスコードでフィルタ

フィルタ入力欄で、特定のステータスコードのみ表示できます。

例：

• status-code:404 → 404エラーのリクエストのみ表示
• status-code:500-599 → 5xxエラーのリクエストのみ表示
• -status-code:200 → 200以外のリクエストを表示

ドメイン別フィルタ

フィルタ入力欄で、特定のドメインのみ表示できます。

例：

• domain:api.example.com → 指定ドメインのリクエストのみ表示

実務でのトラブルシューティング事例

ここからは、実務でよく遭遇する3つの問題と、ネットワークタブを使った解決方法を解説します。

事例1：APIが404エラーで返ってくる

症状

// コード例
fetch('https://api.example.com/users/123')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// コンソールにエラー表示
// Error: 404 Not Found

ネットワークタブでの確認手順

ステップ1：リクエストを特定

1. ネットワークタブで「Fetch/XHR」フィルタをクリック
2. ステータスが「404」のリクエストを探す
3. 該当リクエストをクリック

ステップ2：URLを確認

ヘッダータブの「全般」を見て、実際に送られたURLを確認します。

Request URL: https://api.example.com/user/123
                                     ↑
                                  ここが間違い！

よくある原因：

• スペルミス（users → user）
• パラメータの間違い（id が undefined）
• スラッシュの過不足（/api/users → /apiusers）
• 環境変数の設定ミス（開発環境のURLが本番環境で使われている）

ステップ3：メソッドを確認

Request Method: POST

GETリクエストを送るつもりがPOSTになっていないか確認します。

ステップ4：パラメータを確認

クエリ文字列パラメータ（GETの場合）や ペイロード（POSTの場合）を確認します。

// コードで送ったつもり
const userId = undefined; // ← ここが問題！
fetch(`https://api.example.com/users/${userId}`)

// 実際に送られたURL
https://api.example.com/users/undefined

解決方法

1. URLのスペルミスを修正
2. パラメータが正しく渡されているか確認
3. APIドキュメントと照らし合わせて、エンドポイントが正しいか確認

事例2：CORSエラーが発生する

症状

// コンソールに表示されるエラー
Access to fetch at 'https://api.example.com/users' from origin 
'http://localhost:3000' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the 
requested resource.

CORSとは？

CORS（Cross-Origin Resource Sharing）は、異なるドメイン間での通信を制御するブラウザのセキュリティ機能です。

例：

• http://localhost:3000（フロントエンド）
• https://api.example.com（バックエンド）

この2つはオリジン（ドメイン）が異なるため、サーバー側が明示的に許可しない限り、ブラウザが通信をブロックします。

ネットワークタブでの確認手順

ステップ1：リクエストの状態を確認

1. ネットワークタブで該当のリクエストを見つける
2. ステータスコードを確認

CORSエラーの場合、ステータスが以下のいずれかになります：

• （failed） または CORS error
• 200 だが、コンソールにCORSエラーが出ている

ステップ2：レスポンス ヘッダーを確認

ヘッダータブの「レスポンス ヘッダー」で以下を確認します：

// 正常な場合（CORSが許可されている）
Access-Control-Allow-Origin: *
または
Access-Control-Allow-Origin: http://localhost:3000

// CORSエラーの場合
（このヘッダーが存在しない、または値が異なる）

ステップ3：Preflightリクエストを確認

POST、PUT、DELETEなどのリクエストでは、Preflightリクエスト（OPTIONSメソッド）が事前に送信されます。

1. ネットワークタブで「すべて」フィルタを選択
2. 同じURLに対する「OPTIONS」メソッドのリクエストを探す
3. そのリクエストのレスポンス ヘッダーを確認

// 必要なヘッダー
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

解決方法

1. サーバー側で CORS を許可する（推奨）

バックエンド開発者に依頼して、適切なCORSヘッダーを設定してもらいます。

// Node.js (Express) の例
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

// または cors ミドルウェアを使用
const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000'
}));

2. プロキシを使用する（開発環境）

フロントエンド側でプロキシ設定を行い、同一オリジンからのリクエストに見せかけます。

// Vite の場合（vite.config.js）
export default {
  server: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
}

// Next.js の場合（next.config.js）
module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://api.example.com/:path*'
      }
    ]
  }
}

3. Chrome拡張機能を使う（開発時のみ、非推奨）

「CORS Unblock」などの拡張機能を使うこともできますが、本番環境では使えないため、根本的な解決にはなりません。

事例3：通信が遅い・レスポンスに時間がかかる

症状

• APIの呼び出しに5秒以上かかる
• 画面の読み込みが非常に遅い
• ユーザー体験が悪い

ネットワークタブでの確認手順

ステップ1：時間列をソート

1. ネットワークタブの「時間」列をクリックしてソート
2. 最も時間がかかっているリクエストを特定

ステップ2：タイミングタブで内訳を確認

遅いリクエストをクリックして、タイミングタブを開きます。

パターンA：サーバーの応答を待機しています (TTFB) が長い

キュー: 2 ms
停止しました: 5 ms
DNS ルックアップ: 10 ms
初期接続: 15 ms
SSL: 20 ms
リクエストを送信しました: 1 ms
サーバーの応答を待機しています(TTFB): 4500 ms ← ここが長い！
コンテンツのダウンロード: 50 ms

原因： サーバー側の処理が遅い

対策：

• データベースクエリの最適化
• サーバー側のキャッシュ導入
• 不要な処理の削減
• インデックスの追加

パターンB：コンテンツのダウンロードが長い

キュー: 2 ms
停止しました: 5 ms
DNS ルックアップ: 10 ms
初期接続: 15 ms
SSL: 20 ms
リクエストを送信しました: 1 ms
サーバーの応答を待機しています(TTFB): 200 ms
コンテンツのダウンロード: 3800 ms ← ここが長い！

原因： レスポンスデータが大きすぎる

対策：

• レスポンスデータの圧縮（gzip、brotli）
• 不要なデータを返さない（必要なフィールドのみ）
• ページネーション・無限スクロールの導入
• 画像の最適化・遅延読み込み

パターンC：Initial connection + SSL が長い

キュー: 2 ms
停止しました: 5 ms
DNS ルックアップ: 10 ms
初期接続: 1500 ms ← ここが長い！
SSL: 800 ms ← ここも長い！
リクエストを送信しました: 1 ms
サーバーの応答を待機しています(TTFB): 200 ms
コンテンツのダウンロード: 50 ms

原因： ネットワークが遅い、サーバーが遠い

対策：

• CDN の利用
• HTTP/2 または HTTP/3 の利用
• Keep-Alive接続の活用
• サーバーの地理的位置の最適化

ステップ3：サイズを確認

サイズ列で、どのリソースが大きいか確認します。

• 画像：数MB以上 → 圧縮・WebP形式への変換
• JavaScript：数百KB以上 → コード分割、Tree Shaking
• CSS：数百KB以上 → 未使用のCSSを削除
• API レスポンス：100KB以上 → データの絞り込み、圧縮

実践例：遅いAPIレスポンスの改善

// 改善前：全ユーザーデータを取得（遅い）
fetch('https://api.example.com/users')
  .then(res => res.json())
  .then(data => {
    // 10000件のユーザーデータ（5MB）が返ってくる
    console.log(data); // コンテンツのダウンロードが長い！
  });

// 改善後：ページネーションで必要な分だけ取得
fetch('https://api.example.com/users?page=1&limit=20')
  .then(res => res.json())
  .then(data => {
    // 20件のユーザーデータ（10KB）だけ返ってくる
    console.log(data); // 高速！
  });

よくあるハマりポイントと対処法

ハマりポイント1：キャッシュが原因で最新のデータが見えない

症状：

• コードを修正したのに、変更が反映されない
• APIのレスポンスが古いまま
• CSSやJSの変更が反映されない

原因： ブラウザキャッシュが使われている

対処法：

1. キャッシュを無効化をチェック（最も確実）
2. スーパーリロード： Ctrl + Shift + R（Windows）/ Cmd + Shift + R（Mac）
3. キャッシュクリア： ネットワークタブで右クリック → 「Clear browser cache」

確認方法：

ネットワークタブの サイズ列を見て、以下のように表示されていればキャッシュが使われています。

• （ディスク キャッシュ）
• （メモリ キャッシュ）
• （ServiceWorker）

ハマりポイント2：ページ遷移でログが消える

症状：

• フォーム送信後にページ遷移して、ログが消えてしまう
• リダイレクト前のリクエストが確認できない

原因： ログを保持がチェックされていない

対処法：

ログを保持にチェックを入れる

これで、ページ遷移してもログが残ります。

ハマりポイント3：リクエストが多すぎて見づらい

症状：

• 数百件のリクエストが表示されて、目的のものが見つからない
• 画像、CSS、JSなど不要なリクエストが混ざっている

対処法：

1. フィルターを活用： API通信だけ見たいなら「Fetch/XHR」をクリック
2. 検索機能： フィルタ入力欄に api や user など、URLに含まれる文字列を入力
3. ドメイン別フィルタ： domain:api.example.com で特定ドメインのみ表示
4. ステータスコードフィルタ： -status-code:200 でエラーのみ表示

ハマりポイント4：デベロッパーツールを開く前のリクエストが記録されない

症状：

• ページを開いてからデベロッパーツールを開いたら、最初のリクエストが記録されていない

原因： ネットワークタブは開いた時点から記録を開始する

対処法：

1. 先にデベロッパーツールを開いてから、ページをリロード
2. または、デベロッパーツールを常に開いたまま開発する

実務で使えるチェックリスト

トラブルシューティングの際に、このチェックリストを順番に確認しましょう。

API通信のデバッグチェックリスト

パフォーマンスチェックリスト

JavaScriptコード例：実践的なAPI通信

ここでは、ネットワークタブで確認しやすい実践的なコード例を紹介します。

例1：fetch を使った基本的なGETリクエスト

// ユーザー一覧を取得
async function getUsers() {
  try {
    const response = await fetch('https://api.example.com/users');

    // ネットワークタブで確認：Status が 200 であることを確認
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    console.log('ユーザーデータ:', data);
    return data;
  } catch (error) {
    console.error('エラーが発生しました:', error);
  }
}

getUsers();

• リクエストURL：https://api.example.com/users
• メソッド：GET
• ステータス：200
• タイプ：fetch

ネットワークタブでの確認ポイント：

例2：POSTリクエストでデータを送信

// 新しいユーザーを作成
async function createUser(userData) {
  try {
    const response = await fetch('https://api.example.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer your-token-here'
      },
      body: JSON.stringify(userData)
    });

    if (!response.ok) {
      // ネットワークタブで ヘッダー → レスポンス を確認
      const errorData = await response.json();
      console.error('サーバーエラー:', errorData);
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    console.log('作成成功:', data);
    return data;
  } catch (error) {
    console.error('エラー:', error);
  }
}

// 実行
createUser({
  name: '山田太郎',
  email: 'taro@example.com',
  age: 28
});

ネットワークタブでの確認ポイント：

• メソッド：POST
• ヘッダー → リクエストヘッダー：Content-Type、Authorization の確認
• ヘッダー → ペイロード：送信したJSONデータの確認
• ステータス：201（Created）または 200

例3：axiosを使ったエラーハンドリング

import axios from 'axios';

// axiosのインスタンスを作成（共通設定）
const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000, // 5秒でタイムアウト
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your-token-here'
  }
});

// ユーザーデータを取得
async function getUserById(userId) {
  try {
    const response = await api.get(`/users/${userId}`);
    console.log('ユーザーデータ:', response.data);
    return response.data;
  } catch (error) {
    // ネットワークタブでステータスコードを確認
    if (error.response) {
      // サーバーからのレスポンスがある（4xx, 5xx）
      console.error('ステータス:', error.response.status);
      console.error('データ:', error.response.data);
      console.error('ヘッダー:', error.response.headers);
    } else if (error.request) {
      // リクエストは送られたが、レスポンスがない
      console.error('レスポンスなし:', error.request);
    } else {
      // リクエスト設定時のエラー
      console.error('エラー:', error.message);
    }
  }
}

getUserById(123);

ネットワークタブでの確認ポイント：

• timeout設定により、5秒以上かかるとエラーになる
• error.response がある場合は、ネットワークタブで詳細を確認
• error.request の場合は、ネットワークエラーやCORSエラーの可能性

例4：並列リクエストのパフォーマンス最適化

// 悪い例：順次実行（遅い）
async function getDataSequential() {
  const users = await fetch('https://api.example.com/users').then(r => r.json());
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  const comments = await fetch('https://api.example.com/comments').then(r => r.json());

  // ネットワークタブで確認：3つのリクエストが順番に実行される
  // 合計時間 = users + posts + comments
  return { users, posts, comments };
}

// 良い例：並列実行（速い）
async function getDataParallel() {
  const [users, posts, comments] = await Promise.all([
    fetch('https://api.example.com/users').then(r => r.json()),
    fetch('https://api.example.com/posts').then(r => r.json()),
    fetch('https://api.example.com/comments').then(r => r.json())
  ]);

  // ネットワークタブで確認：3つのリクエストが同時に実行される
  // 合計時間 = max(users, posts, comments)
  return { users, posts, comments };
}

getDataParallel();

ネットワークタブでの確認ポイント：

• ウォーターフォール列を見て、リクエストが並列実行されているか確認
• 並列実行の方が、総時間が短くなる

まとめ：ネットワークタブを使いこなすための重要ポイント

基本操作の復習

• ✅ ログを保持をONにしてページ遷移に備える
• ✅ キャッシュを無効化をONにして常に最新のデータを確認
• ✅ Fetch/XHR フィルタでAPI通信だけを表示
• ✅ リクエストをクリックして ヘッダー、プレビュー、タイミング を確認

トラブルシューティングの鉄則

1. ステータスコードを確認 → 200なら成功、4xxならクライアントエラー、5xxならサーバーエラー
2. URLとメソッドを確認 → スペルミスやパラメータ間違いがないか
3. ヘッダーを確認 → 認証トークン、Content-Type、CORSヘッダー
4. タイミングを確認 → どこがボトルネックか（サーバー？ネットワーク？データサイズ？）
5. レスポンスを確認 → エラーメッセージが返っていないか

パフォーマンス改善のヒント

• 📊 サーバーの応答を待機しています (TTFB) が長い → サーバー側の最適化
• 📊 コンテンツのダウンロードが長い → データサイズの削減、圧縮
• 📊 リクエスト数が多い → バンドル、結合、遅延読み込み
• 📊 画像が大きい → 圧縮、WebP形式、レスポンシブ画像

よくあるエラーと対処法まとめ

次のステップ

ネットワークタブを使いこなせるようになったら、次は以下のツールも学んでみましょう：

• パフォーマンスタブ： JavaScriptの実行時間、レンダリング時間を詳細に分析
• Lighthouseタブ： パフォーマンス、アクセシビリティ、SEOの総合評価
• コンソールタブ： console.logやエラーメッセージの確認
• ソースタブ： ブレークポイントを使ったデバッグ

これらを組み合わせることで、より効率的な開発が可能になります。

参考資料

• Chrome DevTools – Inspect network activity（公式ドキュメント）
• Network features reference（公式リファレンス）
• MDN – CORS（オリジン間リソース共有）
• MDN – HTTP ステータスコード
• Web.dev – Time to First Byte (TTFB)

この記事が役に立ったら、ぜひ実際の開発で活用してみてください！

ネットワークタブを使いこなすことで、API通信のデバッグやパフォーマンス改善が劇的に効率化されます。最初は難しく感じるかもしれませんが、毎日使っていくうちに自然と身につきます。

困ったときは、この記事を見返して、チェックリストを順番に確認してみてください。