Determine source of API request?

Question

I have been introduced to a web application that I need to make some modifications to.

The app is huge, and there are perhaps 100 Javascript files. These files send requests to a third party API all the time.

Now, in the console, I can see all these requests. Let's say that one looks like:

GET http://123.456.789.10:8000/v1/accounts/accountnum/children?_=1422026843600

Then of course I can see the parameters sent, headers and response. My problem is that I need to locate the JS file which is sending one particular request. Searching all the files for the API target URL reveals that 40 or 50 files send requests to this same URL, with similar parameters.

Is there a way I can find out the source file of one specific request? Something like sent from filename.js on line 123 would be ideal, but just the file name would be of great help too.

I could go through all the files and try each one individually, but that seems like a huge waste of time. There would be A LOT of code to go through.

Answer 1

If you know what to do in the application to make the request occur, in Chrome you can use an XHR breakpoint to catch it:

1. Navigate to the point where you're about to do the thing that causes the request
2. Open Dev Tools
3. Switch to the Sources tab
4. On the right, scroll down to "XHR Breakpoints"
5. Click the + button, fill in some appropriate subset of the URL (or leave it blank to break on all XHR)
6. Add it
7. Do the thing that does the request

Chrome will break and take you to the line of code that was triggering the XHR.