Edit and replay XHR chrome/firefox etc?
Solution 1
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 :
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:
Solution 2
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.
Solution 3
Updating/completing zszep answer:
After copying the request as cUrl (bash), simply import it in the Postman App:
Solution 4
My two suggestions:
Chrome's Postman plugin + the Postman Interceptor Plugin. More Info: Postman Capturing Requests Docs
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.
Solution 5
For Firefox the problem solved itself. It has the "Edit and Resend" feature implemented.
For Chrome Tamper extension seems to do the trick.
Related videos on Youtube
Comments
-
madsobel almost 2 years
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?
-
Janaka Bandara about 4 yearsIf 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. -
AzizSM over 2 yearsQuick answer : Chrome do not have edit and replay feature- All the answer below just beat around the bush . Firefox, yes you have it.
-
-
madsobel over 9 yearsThis 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.
-
Michael P. Bazos over 9 yearsI added info about Firefox in the answer
-
afilina over 8 yearsSmall 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. -
threadster over 8 yearsSince I started using Postman + the Interceptor chrome extension, I haven't had any need for Fiddler.
-
CodeBrauer over 6 years@afilina to even more automate this process you can add
&& open preview.html
on macOS and the file opens directly after the request -
Sameer Naik over 6 years@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.
-
yefrem about 6 yearsFYI Postman app for Chrome is now deprecated and setting this up in standalone version is a bit more difficult
-
Siddhant Rimal over 5 years@MichaelP.Bazos does firefox also have the pause on all XHR request like chrome does? I am unable to find it.
-
Eric Kigathi over 5 yearsThank you for this. For anyone else wondering - you can just paste the
fetch
command directly in the Chrome console and replay the request. -
POSIX-compliant about 5 yearsYou 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))
-
jpenna about 5 yearsIn this case, Firefox is doing a much better job by far!
-
Nabi K.A.Z. over 4 years@Josh Lee, I thinks POSIX-compliant's tips was good and can be added to this answer.
-
Nabi K.A.Z. over 4 years@POSIX-compliant good tips, Is there a more smaller command that can be keep in my mind?!
-
Michael over 4 yearsI 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)
-
T3rm1 about 4 yearsWhich is not updated any more and has rather bad reviews. Best alternative is to use Firefox for this kind of work imo.
-
Jari Turkia about 4 yearsYeah. The situation for resending seems to change quite fast. Now Chrome has Resend-for XHR-requests, but it doesn't allow editing.
-
puppyceceyoyo about 4 yearsbeware 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.
-
Dotista almost 4 yearsFor those who wonder where to paste the fetch code: paste and modify it on the console
-
gimp3695 over 3 yearsThank 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
-
HankScorpio about 3 yearsThis was the best solution for me. I needed to iterate over a large array of values and make a request for each. This allowed me to do that in the simplest way via the console.
-
hldev over 2 yearsOP wants to edit and replay the request, chrome so far allows only replaying without changes.