Finding the origin of HTTP request on a page

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?

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

I am not sure if you could configure it to break on each request, but in FireBug you could use the Net and Console (for ajax) tabs to see a list of all outgoing requests.

If you're looking for a good plugin, you might find Tamper Data (for Firefox) really useful. Once you start 'Tamper', it will pop up a message box displaying all http POST details, including the values of various attributes.