web-dev-qa-db-ja.com

XHR chrome / firefoxなどを編集して再生しますか？

私は、ブラウザーで行われたXHRリクエストを変更して、それを再度再生する方法を探していました。ブラウザで完全なPOSTリクエストが完了したとします。変更したいのは小さな値だけで、それをもう一度再生します。これは、ブラウザで直接行う方がはるかに簡単で高速です。

私は少しグーグルで検索しましたが、ChromeやFirefoxでこれを行う方法を見つけていません。これらのブラウザのいずれか、または別のブラウザでそれを行う方法はありますか？

google-chromefirefoxbrowserxmlhttprequest
96
madsobel

Chrome：

  • Devtoolsの[ネットワーク]パネルで、右クリックして[cURLとしてコピー]を選択します。
  • curlコマンドがあると仮定して、リクエストを貼り付け/編集し、ターミナルから送信します

キャプチャを参照してください。

enter image description here

または、Webページのコンテキストでリクエストを送信する必要がある場合を選択し、 "fetchとしてコピー"およびJavaScriptコンソールパネルからコンテンツを編集して送信します。


Firefox：

Firefoxでは、ネットワークパネルから直接XHRを編集および再送信できます。以下のキャプチャはFirefox 36からのものです。

enter image description here

118
Michael P. Bazos

私の2つの提案：

  1. ChromeのPostmanプラグイン + Postman Interceptorプラグイン 。詳細： Postman Capturing Requests Docs

  2. Windowsを使用している場合、TelerikのFiddlerはオプションです。 httpリクエストを再生するcomposerオプションがあり、無料です。

16
zszep

Chromeはバージョン67でfetchとしてコピーしました：

フェッチとしてコピー

ネットワーク要求を右クリックし、[コピー]> [フェッチとしてコピー]を選択して、その要求のfetch()-- equivalentコードをクリップボードにコピーします。

https://developers.google.com/web/updates/2018/04/devtools#fetch

サンプル出力：

fetch("https://stackoverflow.com/posts/validate-body", {
  credentials: "include",
  headers: {},
  referrer: "https://stackoverflow.com/",
  referrerPolicy: "Origin",
  body:
    "body=Chrome+now+has+_Copy+as+fetch_+in+version+67%3A%0A%0A%3E+Copy+as+fetch%0ARight-click+a+network+request+then+select+**Copy+%3E+Copy+As+Fetch**+to+copy+the+%60fetch()%60-equivalent+code+for+that+request+to+your+clipboard.%0A%0A&oldBody=&isQuestion=false",
  method: "POST",
  mode: "cors"
});

違いは、cURLとしてコピーにはすべてのリクエストヘッダー（CookieやAcceptなど）も含まれ、Chromeの外部でリクエストを再生するのに適していることです。 fetch()コードは、同じブラウザー内で再生するのに適しています。

15
Josh Lee

更新/完了 zszep answer ：

リクエストをcUrl（bash）としてコピーした後、単に Postman App にインポートします：

enter image description here

10
jgpATs2w

Firefoxの場合、問題は解決しました。 「編集および再送信」機能が実装されています。

Chromeの場合 改ざん拡張 がうまくいくようです。

1
Jari Turkia

上記のようにこれを行うにはいくつかの方法がありますが、私の経験では、XHRリクエストと再送信を操作する最良の方法は、chrome devツールを使用してリクエストをcURLリクエストとしてコピーすることです（右クリックネットワークタブでのリクエスト）、Postmanアプリへの単純なインポート（左上の巨大なインポートボタン）。

0
quinlo