Setting Breakpoints Within Firebug
Whenever I wanted to set a breakpoint, I would first have to click through a file list in the script tab, then scroll through the source to the line I wished to set the breakpoint on, click on it, then reload the page. Too many steps. I’ve always opted to litter my code with console.log(); instead. That much simpler to do than setting a breakpoint. This console technique has served me well for the past several years.
While working on a project with my fellow developers at Mutually Human Software, I found myself having to set several brakpoints for some JavasScript. Tired of this, I did a Google search for “setting a firebug breakpoint in code”. The Google gods smiled upon me and blessed me this this little gem: how to set breakpoints from within JS code?.
If you start Firebug and view the HTML file, the “debugger;” keyword gets interpreted and Firebug breaks the execution of the code.
You can set a watch expression or peek at the status of DOM elements at this point. In addition, the console has the same context as the location of the breakpoint.
In this snapshot, you can see that the console has full knowledge of anObject and anArray. This is the same context as the closure that lexically scopes the contents of the hello_debugger.js file. From the Firebug console, if you type in:
Then you’ll see from the alert that the object is in-fact the one you defined in your file.
I like this method of using console rather than setting up watches. Since I’m a rubyist, using the console feels more like using the Ruby debugger as opposed to using the GUI based tools provided by Firebug.
Calling debugger; from code also works in Google Chrome. I haven’t tried this with any other browsers though. So give it a try. Hopefully you find this to be a useful item to have in your toolbox too.