Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Edit and replay XHR chrome/firefox etc?

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?

like image 762
madsobel Avatar asked Oct 08 '22 13:10

madsobel


People also ask

How do I replay a XHR in Chrome?

Right click on the request made and click "Replay XHR".

What is XHR in Chrome?

XMLHttpRequest (XHR) objects are used to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing. XMLHttpRequest is used heavily in AJAX programming.

How do I replay a Chrome request?

Just right click on the request and select Replay XHR.

What is XHR in DevTools?

XMLHttpRequest (XHR) is a JavaScript API to create AJAX requests. Its methods provide the ability to send network requests between the browser and a server.


2 Answers

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

like image 285
Michael P. Bazos Avatar answered Oct 10 '22 01:10

Michael P. Bazos


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.

like image 93
Josh Lee Avatar answered Oct 10 '22 03:10

Josh Lee