Subscribe to RSS Feed

Firebug is mainly a debugger and being able to stop Javascript execution on a breakpoint is obviously one of its essential features.

Also, ability to break on a breakpoint only if certain condition is true is useful feature and so, check out this post if you are interested how to properly create a conditional breakpoint in Firebug.

This post covers three types of conditional breakpoints.

  • Javascript Breakpoint
  • XHR Breakpoint
  • Cookie Breakpoint

Javascript Breakpoint

Let's begin with an example of a standard Javascript breakpoint condition.

An example script:

function myFunction()
{
    for (var i=0; i<1000; i++)
        console.log("i == " + i);
}

We want to break on console.log line only if i == 500

In order to create a conditional breakpoint in Firebug, right click on a line number in the Script panel and compose an expression. The breakpoint will stop only if the expression is evaluated to true.

  • You can use any variables available in the current scope.
  • Notice the question mark (within the breakpoint icon) displayed for conditional breakpoints.

Btw. you could also define a conditional break directly in the code:

function myFunction()
{
    for (var i=0; i<1000; i++)
    {
        if (i == 500)
            debugger;

        console.log("i == " + i);
    }
}

Read more about debugger keyword.

XHR Breakpoint

XHR conditional breakpoints are also supported. These are created in the Net panel that offers the same breakpoint bar as the Script panel. Creating a new breakpoint for XHR request is as easy as clicking on the appropriate row with the request you want to debug.

When a request to the same URL is executed by the current page again, Firebug halts Javascript execution at the source line where it's initiated.

XHR breakpoint 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
    Expression: $postBody.indexOf("key") >= 0

Read more about XHR breakpoints and check out a demo page.

Cookie Breakpoint

Conditional breakpoints can be also created for Cookies - to break when a cookie value changes.

You can use following built-in variables in the expression

  • cookie.value [string] Cookie value
  • cookie.path [string] Cookie path
  • cookie.host [string] Cookie host
  • cookie.expires [number] Cookie expire time in milliseconds
  • cookie.isHttpOnly [boolean] Set to true if the cookie is http only
  • cookie.isSecure [boolean] Set to true if the cookie is secure

Again, couple of examples:

  • Halt JS execution only if the cookie is session cookie (no expire time).
    !cookie.expire

  • Halt JS execution only if the cookie value contains string key.
    cookie.value.indexOf("key") >= 0

Rss Commenti

5 Comments

  1. [...] of Firebug, did you know that you can set conditional breakpoints not only for JavaScript but for XHR and even cookies as [...]

    #1 » Seen on Mars #1 Blue Sky On Mars
  2. Useful feature. I sometimes use it with "stop on errors" feature, setting "false" as an conditional break expression, allowing me to ignore common errors (like server response JSON parsing errors) which are handled by myself in the code - ie. by using try-catch construct.

    Just one tiny correction:
    "Notice the exclamation mark (within the breakpoint icon) displayed for conditional breakpoints."
    Actually it's a question mark, not exclamation.

    #2 Dawid Krysiak
  3. @Dawid: thanks, typo fixed!

    #3 Honza
  4. nice explanation...i appreciate it...

    #4 IT support Birmingham Company
  5. To be sure with all your thoughts here and that i like your blog!

    #5 cheap hair extensions

Sorry, the comment form is closed at this time.