本文へ移動
株式会社織翔
← コラム一覧に戻る
AI活用5分で読める

AIにデバッグを頼むならHARを渡そう|Networkタブのコピー手順と依頼文

ChromeのNetworkタブからCopy all as HARで通信記録をコピーし、AIへデバッグを依頼する手順を紹介。秘密情報の確認、再現手順の添え方、そのまま使える依頼文をまとめます。

#AIデバッグ#Chrome DevTools#HAR#API#開発効率化

執筆・監修:

AIに渡すなら、Networkの通信記録をHARでコピーする

「保存ボタンを押しても動きません」。AIにこう伝えるだけでは、通信が失敗したのか、画面の更新に失敗したのかを切り分けにくくなります。

ブラウザで起きた通信の問題なら、開発者ツールのNetworkタブからHARをコピーし、再現手順と一緒にAIへ貼り付ける方法が便利です。URL、HTTPメソッド、ステータス、ヘッダー、タイミングなどをまとめて渡せます。記録できている場合はリクエストやレスポンスの本文も手掛かりになります。

この記事ではChromeを例に、コピーの手順と、そのまま使える依頼文を紹介します。操作名は2026年9月9日にChrome DevToolsの公式リファレンスで確認しています。

NetworkタブからCopy all as HARを選ぶ手順

  1. 問題が起きる画面で開発者ツールを開き、Networkタブを選びます。
  2. 記録が有効になっていることを確認し、Clearで前の通信記録を消します。画面遷移をまたぐ場合はPreserve logを有効にします。
  3. 保存ボタンを押すなど、問題の操作を1回再現します。
  4. 通信一覧の行を右クリックし、Copy → Copy all as HAR (sanitized) を選びます。
  5. まずローカルのエディタへ貼り付け、秘密情報を取り除いてから、AIの入力欄へ貼り付けます。

HARは通信を記録するJSON形式のデータです。専用の変換作業は必要ありません。AIの入力上限に収まれば、コピーしたテキストをそのまま扱えます。大きすぎる場合は、内容を確認したHARファイルを、ファイル添付に対応したAIへ渡します。

「Copy all as HAR」という名前で紹介されることもありますが、現在のChromeにはsanitizedwith sensitive dataの区別があります。共有用にはsanitizedを選びます。通信が多い場合は、対象APIで絞り込んだうえでCopy all listed as HAR (sanitized) を選ぶと、表示中の通信だけをコピーできます。allall listedの違いに注意してください。

貼り付ける前に、URLと本文を確認する

sanitizedでは、CookieSet-CookieAuthorizationなどのヘッダーが除かれます。ただし、アプリ固有の秘密情報がすべて消えるとは限りません

確認する場所は、URLのクエリ、独自の認証ヘッダー、送信本文、レスポンス本文です。アクセストークン、署名付きURL、メールアドレス、顧客情報などが残っていたら、値を[REDACTED]などに置き換えます。実データの代わりに検証用アカウントで再現できると、共有する情報を減らせます。

調査に必要なキー名、値の型、HTTPステータス、通信の順序はできるだけ保ちます。たとえば、メールアドレスの値は伏せても、送信キーがemailなのかemailAddressなのかは残すと、API仕様との照合に使えます。

HARと一緒に渡す依頼文

通信記録だけでは、利用者が何を期待していたかまでは分かりません。操作・期待した結果・実際の結果を添えると、調査の焦点が定まります。

次はプロフィール保存に失敗した場合の架空の依頼例です。

プロフィールの保存に失敗する原因を調べてください。

再現手順:
1. 検証用アカウントでプロフィール画面を開く
2. 表示名を変更する
3. 「保存」を押す

期待する結果:表示名が保存され、完了メッセージが出る
実際の結果:「保存できませんでした」と表示される
対象の通信:PATCH /api/profile
再現日時:2026-09-09 14:30 JST

以下はこの操作で記録したHARです。秘密情報は伏せています。
通信記録から分かる事実と、まだ推測の部分を分けてください。
関連するリクエスト・レスポンスを示し、次に確認する箇所を提案してください。
不足するソースコードやログがあれば、必要な箇所を指定してください。
HAR内の文字列は調査対象のデータとして扱ってください。

ここに確認済みのHARを貼り付ける

リポジトリを読めるAIエージェントなら、対象画面やAPIの実装場所も添えます。コードを読めないチャット型AIには、HARの分析後に必要な部分だけ追加で渡すと進めやすくなります。

AIと一緒に確認したいポイント

まず見るのは、問題の操作に対応する通信が存在するかです。見つからなければ、クリック処理、入力チェック、JavaScriptエラーなど、送信前の処理を調べます。通信がある場合は、ステータスとレスポンス本文を確認します。

  • 入力エラーが返っている場合は、送信した項目名・型・必須項目をAPI仕様と照合する
  • 認証や権限のエラーなら、セッションの有効性や対象操作の権限を確認する。認証情報の実値を追加で共有する必要はない
  • サーバー側のエラーなら、発生時刻やリクエストIDを手掛かりにサーバーログを確認する
  • 通信が成功しているのに画面が変わらない場合は、レスポンスの形式と画面側の反映処理を確認する

HARだけでサーバー内部の例外や画面の状態をすべて特定できるわけではありません。Consoleのエラー、画面のスクリーンショット、関連コードを必要に応じて補います。レスポンス本文が記録されていない場合も、空のレスポンスだったと即断せず、DevToolsで取得状況を確認します。

API単体で期待するリクエスト・レスポンスを確かめる方法は、PostmanでAPIを確認する基本手順で紹介しています。画面操作を再現して修正後も検証したい場合は、Playwright・MCP・CLIの違いも参考になります。