297

I have been looking for a way to alter a XHR request made in my browser and then replay it again.

Say I have a complete POST request done in my browser, and the only thing I want to change is a small value and then play it again. This would be a lot easier and faster to do directly in the browser.

I have googled a bit around, and haven't found a way to do this in Chrome or Firefox.

Is there some way to do it in either one of those browsers, or maybe another one?

Improve this question
2
  • 2
    If you land here after realizing that "Replay XHR" doesn't work in Chrome, note that in cases with preflight (OPTIONS) requests you need to click 'replay' on the preflight request - not the actual final request.
    – Janaka Bandara
    Commented May 8, 2020 at 20:40
  • 2
    Quick answer : Chrome do not have edit and replay feature- All the answer below just beat around the bush . Firefox, yes you have it.
    – AzizSM
    Commented Feb 14, 2022 at 16:48

10 Answers 10

Reset to default
359

Chrome :

  • In the Network panel of devtools, right-click and select Copy as cURL
  • Paste / Edit the request, and then send it from a terminal, assuming you have the curl command

See capture :

enter image description here

Alternatively, and in case you need to send the request in the context of a webpage, select "Copy as fetch" and edit-send the content from the javascript console panel.


Firefox :

Firefox allows to edit and resend XHR right from the Network panel. Capture below is from Firefox 36:

enter image description here

Improve this answer
6
  • 2
    This might actually be what I am looking for. I knew that I could copy the cURL call, but I could not run that from my terminal directly since I would get be authenticated. But with the terminal build in directly to Chorme, I'd assume that the call is made from "within" the browser. If so, then this should seal the deal.
    – madsobel
    Commented Feb 27, 2015 at 22:30
  • Small trick: if you want to see cURL output in the browser, run it in the CLI like this curl ... > preview.html then open the file in the browser.
    – afilina
    Commented Nov 17, 2015 at 22:05
  • @afilina to even more automate this process you can add && open preview.html on macOS and the file opens directly after the request
    – CodeBrauer
    Commented Oct 23, 2017 at 15:03
  • @madsobel late comment, but could not help. You can still execute curl from terminal as the request would have all the original cookies. It is same as replaying XHR from browser.
    – Sameer Naik
    Commented Jan 1, 2018 at 3:51
  • I assume this won't work if developer tools weren't open when the request was made? I can see the URL as an error in the console (ERR_CONNECTION_TIMED_OUT) but when I try to open the link it sends a GET request, when the original was a POST. (As developer tools weren't open at the time, there is no Network entry)
    – Michael
    Commented Dec 5, 2019 at 19:21
121

Chrome now has Copy as fetch in version 67:

Copy as fetch

Right-click a network request then select Copy > Copy As Fetch to copy the fetch()-equivalent code for that request to your clipboard.

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

Sample output:

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"
});

The difference is that Copy as cURL will also include all the request headers (such as Cookie and Accept) and is suitable for replaying the request outside of Chrome. The fetch() code is suitable for replaying inside of the same browser.

Improve this answer
4
  • 38
    Thank you for this. For anyone else wondering - you can just paste the fetch command directly in the Chrome console and replay the request.
    – Eric Kigathi
    Commented Mar 23, 2019 at 0:41
  • 24
    You can use the following after the fetch to resolve the promise returned by fetch and view the response body (assuming it's JSON) .then(r => r.json()).then(json => console.log(json))
    – POSIX-compliant
    Commented Apr 17, 2019 at 19:18
  • 2
    For those who wonder where to paste the fetch code: paste and modify it on the console
    – Dotista
    Commented Jul 9, 2020 at 12:10
  • I needed to append .then(r => r.json()) to the fetch call to see the response on the network tab.
    – user1768761
    Commented Jul 6, 2022 at 15:03
36

Updating/completing zszep answer:

After copying the request as cUrl (bash), simply import it in the Postman App:

enter image description here

Improve this answer
0
25

My two suggestions:

  1. Chrome's Postman plugin + the Postman Interceptor Plugin. More Info: Postman Capturing Requests Docs

  2. If you're on Windows then Telerik's Fiddler is an option. It has a composer option to replay http requests, and it's free.

Improve this answer
2
  • 8
    Since I started using Postman + the Interceptor chrome extension, I haven't had any need for Fiddler.
    – threadster
    Commented Dec 3, 2015 at 14:15
  • 5
    FYI Postman app for Chrome is now deprecated and setting this up in standalone version is a bit more difficult
    – yefrem
    Commented Apr 20, 2018 at 17:46
13

Microsoft Chromium-based Edge supports "Edit and Replay" requests in the Network Tab as an experimental feature:

enter image description here

In order to enable the option you have to "Enable Experimental Features".
Control+Shift+I (Windows, Linux) or Command+Option+I (macOS)
and tick the checkbox next to "Enable Network Console".

More details about how to Enable Experimental Tools and the feature can be found here

Update (April 2023): This is no longer an experimental feature in Edge and it is available by default

Improve this answer
2
  • 3
    Thank you for sharing this. Just an FYI this is still an experimental feature. You will have to enable experiement by following this link: Enable Experimental Features
    – gimp3695
    Commented Oct 1, 2020 at 0:47
  • 2
    This is no longer an experimental feature in Edge. I didn't have to do anything to be able to use it.
    – phillhutt
    Commented Apr 18, 2023 at 15:46
9

For Firefox the problem solved itself. It has the "Edit and Resend" feature implemented.

For Chrome Tamper extension seems to do the trick.

Improve this answer
3
  • 1
    Which is not updated any more and has rather bad reviews. Best alternative is to use Firefox for this kind of work imo.
    – T3rm1
    Commented May 20, 2020 at 6:40
  • 1
    Yeah. The situation for resending seems to change quite fast. Now Chrome has Resend-for XHR-requests, but it doesn't allow editing.
    – Jari Turkia
    Commented May 20, 2020 at 7:50
  • beware of Firefox ver.76 that seems has issue with the CSRF-token in cookies when Edit and Resend. Tried with ver 37 it worked well, but with ver76 has CSRF token validation issue.
    – puppyceceyoyo
    Commented Jun 2, 2020 at 1:43
6

Awesome Requestly

Intercept & Modify HTTP Requests

Modify Response Example

Improve this answer
2

5 years have passed and this essential requirement didn't get ignored by the Chrome devs.
While they offer no method to edit the data like in Firefox, they offer a full XHR replay.
This allows to debug ajax calls.
enter image description here
"Replay XHR" will repeat the entire transmission.

Improve this answer
3
  • 5
    OP wants to edit and replay the request, chrome so far allows only replaying without changes.
    – hldev
    Commented Oct 8, 2021 at 17:11
  • 2
    For some reason this is no longer available (Chrome 103.0.5060.114)
    – Romuald Brunet
    Commented Jul 12, 2022 at 12:49
  • I used to see it but now cannot see this menu. But checked in other pages - there is it. How can it not be in my page? Just googled and found this stackoverflow.com/a/56175133/6737670
    – Darius.V
    Commented May 4, 2023 at 13:40
0

There are a few ways to do this, as mentioned above, but in my experience the best way to manipulate an XHR request and resend is to use chrome dev tools to copy the request as cURL request (right click on the request in the network tab) and to simply import into the Postman app (giant import button in the top left).

Improve this answer
0

No need to install 3rd party extensions!

There exists the javascript-snippet, which you can add as browser-bookmark and then activate on any site to track & modify the requests. It looks like:

enter image description here

For further instructions, review the github page.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.