Thursday, November 12, 2009

Firebug 1.5: XHR Breakpoints

Create XHR Breakpoint

In order to create a XHR breakpoint, the Net panel offers the same breakpoint bar that is already well known from the Script panel.

Breakpoint bar within the Net panel.

So, creating a new breakpoint for XHR request is as easy as clicking on the appropriate row with the request the user wants to debug.

As soon as the breakpoint is there and a request to the same URL is executed by the current page again, Firebug halt's Javascript execution at the source line where the request has been initiated.

Javascript execution halted on XHR Breakpoint

You can see two things on this screenshot. First, there is no breakpoint in the source code so, you don't have to know the source code line in advance to start debugging and second, the breakpoint is listed in the Breakpoints side panel in a new section called XHR Breakpoints.

Set Breakpoint Condition

If you want to halt the Javascript execution only in specific cases you can specify a condition. Again, this is done in the same way as specifying condition for regular Javascript breakpoint - just right click on the breakpoint circle .

Condition editor for XHR breakpoints

The condition editor allows to specify a Javascript expression that if evaluated to true activates the breakpoint. The condition is evaluated in a scope with some built-in variables that can be used in your expression.

Couple of examples:

Halt JS execution only if URL parameter count is present and equal to 1.
URL: http://www.example.com?count=1
Expression: count == 1

Halt JS execution only if posted data contains string key.
URL: http://www.example.com?count=1
Expression: $postBody.indexOf("key") >= 0

See online demo here.

http://www.softwareishard.com/blog/firebug/firebug-15-xhr-breakpoints/

No comments: