CODEWITHSUNDEEP
javascriptxmlhttprequestgoogle-chrome-devtools
Dan Dascalescu
Dan Dascalescu

Reputation: 151988

Chrome DevTools: jump from XHR network request, to the code that made it

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?

enter image description here

Is this impossible?

Upvotes: 36

Views: 16064

Answers (2)

Maciej Bielski
Maciej Bielski

Reputation: 129

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!

Upvotes: 13

Konrad Dzwinel
Konrad Dzwinel

Reputation: 37903

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.

Chrome DevTools Network Tab Initiator Stack Trace

Upvotes: 54

Related Questions