ChromeでHTTP POSTをデバッグするにはどうすればよいですか？

Chromeで送信されたHTTP POSTデータを表示したいと思います。

データは現在メモリにあり、フォームを再送信することができます。

サーバーを再送信するとエラーがスローされることはわかっていますが、Chromeのメモリにあるデータを表示できますか？

1. Chromeデベロッパーツールに移動します（Chromeメニュー->その他のツール->デベロッパーツール）
2. 「ネットワーク」タブを選択します
3. 現在のページを更新します
4. ネットワークコンソールがオンのときに発生したhttpクエリのリストが表示されます。左側のいずれかを選択してください
5. 「ヘッダー」タブを選択します

出来上がり！

Chrome DevToolsでHTTP POSTリクエストをフィルタリングできます。次のようにしてください：

1. Chromeを開きデベロッパーツール（Cmd+ Opt+ IMac上、Ctrl+ Shift+ IまたはF12Windows上）と「ネットワーク」タブをクリックしてください
2. 「フィルター」アイコンをクリックします
3. フィルター方法を入力してください： method:POST
4. デバッグするリクエストを選択します
5. デバッグするリクエストの詳細を表示します

スクリーンショット

Chromeバージョン53でテスト済み。

ChromeのCanaryバージョンを使用して、POSTリクエストのリクエストペイロードを確認できます。

便利なもう1つのオプションは、専用のHTTPデバッグツールです。いくつか利用可能なものがあります。HTTPToolkitをお勧めします。これと同じ問題を自分で解決するために私が取り組んできた（そうですね、私は偏見があるかもしれません）オープンソースプロジェクトです。

主な違いは、使いやすさとパワーです。Chrome開発ツールは単純なものに適しているので、そこから始めることをお勧めしますが、そこの情報を理解するのに苦労していて、より多くの説明またはパワーが必要な場合は、適切に焦点を合わせたツールが役立ちます。

この場合は、使いやすいエディターと強調表示（すべてVS Codeを使用）を使用して、探している完全なPOST本文が表示されるので、掘り下げることができます。もちろん、リクエストヘッダーとレスポンスヘッダーが表示されますが、表示できるすべての標準ヘッダーとステータスコードについては、MDN（Mozilla Developer Network）のドキュメントなどの追加情報が含まれています。

画像は、StackOverflowの答えの1000分の価値があります。

他の人はとてもいい答えをしてくれましたが、私は追加の開発ツールで彼らの仕事を完了したいと思います。これは、呼び出されたライブHTTPヘッダーとあなたにそれをインストールすることができますFirefoxの、とにクローム我々は次のように同じプラグインを持って、この。

それでの作業はかなり簡単です。

1. Firefoxを使用して、投稿リクエストを送信するWebサイトに移動します。

2. Firefoxメニューの[ ツール ] -> [ライブHTTPヘッダー]

3. 新しいウィンドウがポップアップし、すべてのhttpメソッドの詳細がこのウィンドウに保存されます。このステップでは何もする必要はありません。

4. ウェブサイトでアクティビティを行う（ログイン、フォームの送信など）

5. プラグインウィンドウを確認します。すべて記録されています。

ちょうどあなたがする必要が覚えチェックキャプチャを。

難しい状況があります。投稿フォームを送信すると、Chromeは新しいタブを開いてリクエストを送信します。それは今のところ正しいですが、ファイルをダウンロードするイベントがトリガーされると、このタブはすぐに閉じて、このリクエストをDev Toolでキャプチャできなくなります。

解決策：投稿フォームを送信する前に、ネットワークを切断する必要があります。これにより、リクエストが正常に送信されず、タブが閉じられなくなります。そして、Chrome Devtoolでリクエストメッセージをキャプチャできます（必要に応じて新しいタブを更新します）