Question

How can I figure out where a request is made in a javascript application?

I’m debugging a large application which generates an incorrect HTTP request somewhere. I believe I haven’t configured something properly with the API generating the request (Google Maps). If I could figure out where the request is made, then I could trace back to the construction of the URL and see where I need to set the right parameters.

Is it possible (in Safari/Chrome/Firefox with Firebug or anything else) to break at the point any request is made?

Answer 1

In Firebug there’s a new feature that lets you break when an XmlHttpRequest is made. You can then examine the stack to see who the caller is:

• Break-on-XHR:

  Break On Next Network Event

  1. If you are stopped in the debugger, either click the blue continue button or reload the page
  2. Select the Firebug Net Panel
  3. Click the Break on Next or Pause button ()
  4. Click this button Break On XHR
  5. Firebug will break on the XHR event

In the case the request is made by way of regular dom manipulation (like an image tag being inserted), you could break when the DOM is changed:

• Breakpoints on DOM (HTML) Mutation Events: http://getfirebug.com/doc/breakpoints/demo.html#html

The LiveHttpHeaders add-on could also be used to watch all HTTP requests and then you could grep the source for some identifiers used.

A couple of other ways to set a breakpoint in Firebug:

• insert this break statement into the code:

  debugger; 
  

• open the script tab and select the line you want to break at