CODEWITHSUNDEEP
google-chromedebugginggoogle-chrome-devtools
Yair Nevet
Yair Nevet

Reputation: 13003

How to break on a XMLHttpRequest event and edit the call's arguments before running the request to completion

Using Google Chrome, I would like to break before a specified XMLHttpRequest event is fired in order to manipulate its arguments data.

So far, I managed to to break on an XHR call event, but I couldn't figure out how to manipulate the call's input before it is fired and sent to the server - my main goal is to manipulate/change the argument of the request.

Here is a snapshot of my current work using the Chrome DevTools: enter image description here

Any help would be appriciated!

Upvotes: 2

Views: 1542

Answers (1)

Kayce Basques
Kayce Basques

Reputation: 25897

Have you tried the XHR Breakpoints feature on the Sources panel? I'm pretty sure that'll break before the request is sent out. From there you can inspect and manipulate the data from the Console.

XHR breakpoints

You can see the pane on the right of the screenshot above.

Another way to set breakpoints on XHRs is from the Event Listener Breakpoints pane. From here you can trigger breakpoints on various stages of the XHR lifecycle.

XHR lifecycle breakpoints

Take the following fiddle for example: https://jsfiddle.net/kaycebasques/jdf20gn4/1/

var xhr = new XMLHttpRequest();
var params = {"a": 1, "b": 2};
xhr.open('GET', 'https://httpbin.org/get');
xhr.send(params);

I created the "Any XHR" breakpoint by pressing the plus sign next to XHR Breakpoints and then just pressing Enter.

When the breakpoint is paused, you can see the currently defined variables in the Scope pane, above XHR Breakpoints.

scope

To modify XHR data, you just find the variable that you're looking for in the Scope pane, and then use the Console to modify that variable.

modify xhr data

Upvotes: 5

Related Questions