Network タブから API リクエストをコピーする方法

ブラウザで API リクエストをデバッグしていて 400 や 500 エラーを見つけた場合、最も迅速な調査方法は、Network タブから直接そのリクエストをコピーし、専用の API クライアントで再実行することです。プロキシ設定は不要です。Chrome、Edge、Firefox で効率的に行う方法を以下に説明します。

標準的なワークフロー

DevTools を開き(F12 または Mac では Cmd+Option+I)、Network タブに移動して、リクエストを発生させるアクションをトリガーします。リクエストがリストに表示されたら、右クリックしてコピーオプションにアクセスします。

コピーする前に、確認しておくべき2つの設定があります:

• Fetch/XHR でフィルタリング — “Fetch/XHR” フィルタボタンをクリックして、静的アセットを非表示にし、API コールのみに焦点を当てます。これにより、適切なリクエストを見つけやすくなります。
• Preserve log — ページナビゲーションやリダイレクト中にリクエストが発生する場合は、これを有効にします。これがないと、Network タブはナビゲーション時にクリアされ、エントリが失われます。

特定のエンドポイントを素早く見つけるには、Search パネル(Network タブ内で Ctrl+F / Cmd+F)を使用し、URL フラグメントまたはエンドポイント名で検索します。

Copy as cURL と Copy as Fetch の比較

リクエストを右クリックすると、いくつかのコピーオプションが表示されます。最も便利なのは Copy as cURL と Copy as fetch です。

Copy as cURL

これは Chrome、Edge、Firefox で最も広くサポートされているオプションです。ターミナルに直接貼り付けたり、Postman や Insomnia などのツールにインポートしたりできるシェルコマンドを生成します。

curl 'https://api.example.com/users' \
  -H 'Authorization: Bearer eyJhbGci...' \
  -H 'Content-Type: application/json' \
  --data-raw '{"page":1}'

最適な用途: ターミナルでのテスト、バックエンドチームメンバーとの共有、API クライアントへのインポート、または再現可能なリクエストを含むバグレポートの提出。

Copy as Fetch

これは、ブラウザコンソールや Node.js スクリプトに直接貼り付けることができる JavaScript の fetch() 呼び出しを出力します。

fetch("https://api.example.com/users", {
  method: "POST",
  headers: {
    "Authorization": "Bearer eyJhbGci...",
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ page: 1 })
});

最適な用途: コンソールでの迅速なテスト、JavaScript 環境での問題の再現、またはコードベースでの fetch 呼び出しのスキャフォールディング。

Chrome と Edge は、環境固有のワークフロー用に Copy as Node.js fetch と Copy as PowerShell も提供しています。

コピーしたリクエストが正常に再実行されない場合

リクエストをコピーすると、セッション Cookie、認証トークン、CSRF ヘッダーを含む、その正確な瞬間の状態がキャプチャされます。後で再実行すると、いくつかの理由で失敗する可能性があります:

• トークンまたはセッションの期限切れ — JWT とセッション Cookie には TTL があります。1時間前にコピーしたリクエストは 401 を返す可能性があります。
• Cookie ベースの認証 — 一部の認証フローは、コピーされた出力に完全には表示されない HttpOnly Cookie に依存しています。
• リクエストのシーケンス — 一部の API では、ターゲット呼び出しが成功する前に事前リクエスト(例: CSRF トークンの取得)が必要です。

再実行したリクエストが予期せず失敗した場合は、まず認証ヘッダーを確認してください。

複数のリクエストのエクスポート: HAR ファイル

複数のリクエストを一度にキャプチャしてエクスポートするには、Network タブの HAR エクスポートオプションを使用します。現在の Chrome および Edge バージョンでは、HAR エクスポートはデフォルトでサニタイズされ、機密データを含むエクスポートを明示的に有効にしない限り、Cookie や認証データなどの機密ヘッダーが除外される場合があります。生成された .har ファイル(JSON 形式)は、Postman や Insomnia などのツールにインポートしたり、jq などのツールで処理して URL やペイロードを一括抽出したりできます。

セキュリティに関する注意事項

コピーしたリクエストには、認証トークン、セッション Cookie、API キー、リクエストボディなどの機密データが含まれていることがよくあります。cURL コマンドや HAR ファイルを同僚と共有したり、バグレポートに含めたりする前に、サニタイズしてください。実際のトークンを <TOKEN> などのプレースホルダーに置き換え、ペイロードから個人データを削除します。

まとめ

Network タブから API リクエストをコピーすることは、フロントエンド開発者のツールキットにおける最も実用的なデバッグ手法の1つです。ポータビリティとツールの互換性が必要な場合は Copy as cURL を使用してください。JavaScript コンテキストにとどまる場合は Copy as fetch を使用してください。いずれの方法でも、数秒で再現可能で検査可能なリクエストが得られます。

FAQ

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.