Share

image As a backend developer, I don't get to work with JavaScript much anymore. However, from time to time, a project would come along that uses JavaScript (specifically, AJAX) to load some backend data on the fly. Of course, nothing works 100% right away*, so I would often have to tweak this JavaScript and massage it until it does what I need.

Here's where Firebug comes in with its JavaScript debugger. I'm used to using a debugger in every language I deal with, so using Firebug is a no brainer. Since it supports breakpoints, stopping execution and inspecting local variables and the rest of the scope generally beats alerts and console.logs for me.

Here's what a typical breakpoint looks like in Firebug:

Firebug JavaScript breakpoint triggered

It's easy to set breakpoints in static scripts – just open the Scripts tab, select a JavaScript file from the dropdown menu, and click to the left of the wanted line number.

Then, when the page is reloaded, if your breakpoints are triggered, Firebug will pause script execution and transfer the control to you.

Setting Firebug JavaScript breakpoint

In most cases, the method above is the only method of setting breakpoints you will ever need to use.

The Problem With Dynamic JavaScript

However, what if the JavaScript file where you need to set breakpoints is not static but instead dynamic (generated on the fly). If you set a breakpoint in this case and reload the page, the breakpoint will most likely disappear, especially if the JavaScript url is generated uniquely every time.

The Solution

If you have access to the source, the solution comes in the form of the

debugger;

keyword. Just add it to your dynamic JavaScript generator or into any JavaScript file you have access to exactly where you want Firebug to break, and voila – it does.

JavaScript debugger keyword

More so, this method also works in Google Chrome and IE (if you have Microsoft Script Debugger). Here is a screenshot of my Chrome Beta 4.0.266.0 triggering:

Chrome JavaScript debugger

I consider this feature relatively unpublished and therefore awesome because:

  • it's hard to search for this specific meaning of the keyword "debugger" when Firebug itself is a debugger and it's a very popular word
  • nobody really reads documentation for Firebug, and even if they do, I haven't actually seen the debugger keyword mentioned
  • I didn't know about it until recently, even though I've been using Firebug for years

Of course, you need access to the code for this to work, so it's not going to work if you're trying to debug someone else's JavaScript.

And finally, don't forget to remove any traces of 'debugger' from your code when you go live or your users will rightfully hunt you down.

Credits And References:

Happy debugging!

(*) – if your project works 100% on the first pass, you must be either a magician or Jon Skeet (Jon Skeet Facts – a-la Chuck Norris, a must read).

● ● ●

Artem Russakovskii is a San Francisco programmer, blogger, and future millionaire (that last part is in the works). Follow Artem on Twitter (@ArtemR) or subscribe to the RSS feed.

In the meantime, if you found this article useful, feel free to buy me a cup of coffee below.



Share
  • jius0

    this is quite interesting, I never saw the 'debugger' keyword before. It's not even a function… just a keyword. should be very helpful.

  • Maciek

    Hi Artem,

    You should also know that the debugger keyword works for debugging code in IE if you have MS's script debugger tool installed.. It's not as awesome as Firebug, but it certainly is better than alert debugging and you can set breakpoints, watches, etc as well.

    Cheers

    • http://beerpla.net Artem Russakovskii

      Maciek,
      I already mention that IE and Chrome support it too, both in the title and in the post content. Thanks for looking out anyway :-]

    • Dan

      IE can support ANY debugger. Not just their script debugger. The debugger built into IE8 & Visual Studio will also work with the debugger keyword.

  • chairface

    Is there a trick for getting the debugger keyword to work in Chrome? I already knew about it for Firebug, but Chrome seems to skip right over it. I've been setting breakpoints manually in Chrome when I can.

    • http://beerpla.net Artem Russakovskii

      chairface,
      I don't think so. I'm running Chrome Beta 4.0.266.0 and my debugger triggers fine. You just have to open it before you refresh the page (Ctrl-Shift-J, then the Scripts tab).

      • chairface

        Hmm, that is very odd. I just tried it again, and it definitely isn't working. It may have something to do with being on a Mac, as I'm pretty sure their Mac support is still lagging behind Windows.

    • Johan Coppieters

      Call in your generated scripts a function of your own, for example: "doDebug();"

      Then implement the function in a static .js file where you set a breakpoint. Step out of the function and you're where you wanted to be.

  • http://www.RjSteinert.com R.J. Steinert

    Awesome. Thank you for writing about this.

  • Rune

    The debugger keyword works in Opera Dragonfly as well.

  • http://www.RjSteinert.com R.J. Steinert

    Smoking. It's actually faster to call the breakpoint line using debugger; when debugging code than setting it in Firebug which would otherwise require you to change the position of breakpoints to hit the 'same line' if you added another line of code. Suppose we could program logic into Firebug to let breakpoints follow code around but it would never be perfect.

  • Afzaal

    In ExtJs normally we have json file, that are being render in UI and they may normally contains inline javascript functions e.g.
    {
    xtype: "panel"
    ,layout: "card"
    ,activeItem:0
    ,items:[{
    xtype: "gridlistings"
    ,listeners: {
    render: function(){
    debugger;
    this.store.on("load", function(store){
    debugger;
    this.getSelectionModel().selectRow(0);
    },this);
    }
    }
    }]
    }
    I put the debugger in the renderer and store on load event function. but it doesn't work nor in IE, Firefox and Chrome.

  • jim

    Thank the lord. I can't believe it took so long to find this. Thanks.

  • Peter

    Thanks- I was looking for a way to debug events.. but.. this will help me next time I am working with dynamic JS again..

  • peet

    with ExtJS4, in the Ext.Loader, you can set disableCaching: true which will prevent the cache buster parameter from being appended to the js url.

  • Steven Holt

    Excellent article. Very well written, and to the point.
    Maybe this will help fellow developers. For complex dynamic javascript debugging  I've been using a tool called splinetech javascript debugger for years now. Way easier, and especially for debugging dynamically generated javascript. Love that pause in 5 secs feature too. Definitely worth checking out (I think it's still at http://www.javascript-debugger.com ). Hope this helps.
    Steven

  • Timothé Lamoureux

    Awesome, thank you so much for this one. It also works with Cloud9's debugger and it will save me a lot of time.