Menu
I want to debug a REST API and see how it's used from very complex client code. After I identify the AJAX request in the Network tab, how can I go to the code that created it?
Is this impossible?
461
XHR Breapoints allow you to break whenever a server request URL contains a particular value. Add an XHR breakpoint within the Sources tab. Click the + icon and enter a value to break on.
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.
Within Chrome, it's possible to place a breakpoint on a XmlHttpRequest allowing you to debug AJAX requests. You can add a breakpoint by going to the "Sources" tab and selecting "XHR Breakpoints". Click the plus icon and type part or all of the URL you wish to add a breakpoint for.
See the "Initiator" column in the network tab. It tells you which code initiated the AJAX call. You will also get a tooltip with a full stack trace.
155
I don't have 50 reputation to comment so I'm replying to:
If you use a library like jQuery or Angular to help you make the call, is >there a way to see the source code that called the helper functions? – >Atav32 Mar 14 at 1:01
If you want to find "real" method call then add breakpoint in line suggested by "Initiator" column and hit "Step out of current function (Shift+F11)" till you reach code you want to.
Cheers!
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
