Find scripts easily
Many web applications are comprised of quite a number of files, and finding the one you want to debug can be a chore. Firebug's script file chooser sorts and organizes files into very clean list that will help you find any file in a snap. You can also type to filter the list.
Pause execution on any line
Firebug allows you to set breakpoints, which tell the debugger to pause execution when it reaches a specific line. While execution is pause, you can see the value of any variable and inspect objects while time is frozen.
To set breakpoints, just click on any line number, and a red dot will appear to indicate that the breakpoint is set. Click the red dot again to remove the breakpoint.
Pause execution, but only if...
Breakpoints can be troublesome if you find them breaking too often. Sometimes you only want to pause under very specific conditions. Firebug allows you to set conditional breakpoints, which check an expression that must be true for the breakpoint to pause.
One step at a time
Once the debugger is paused, you can continue execution one line at a time. This allows you to see exactly how variables and objects are effected when a particular line is executed.
You can also choose to step execution for more than one line. From the context menu, choose "Run to this Line" to continue execution until it passes through the line you clicked.
I break for errors
You don't always choose to use the debugger. Sometimes the debugger chooses you. Firebug gives you the option to break into the debugger automatically when an error occurs so you can examine the screwed up conditions that got you into trouble.
Stack traces unstacked
When the debugger is paused, Firebug shows you the call stack, which is the set of nested function calls that are currently running and waiting to return.
The call stack is represented as a compact strip of buttons in the toolbar, each with the name of a function on the stack. You can click any button to jump to the line where that function is paused, and look at the local variables inside that function.
As you type in these expressions, don't forget that you can use the tab key to autocomplete the properties of objects.
While the debugger is paused, you can move the mouse over any variable in the current function to see a tooltip that reveals the value of that variable. It's a great way to keep your eye on the code and find answers as you read.
Your web app is almost perfect. You've got all the bugs worked out, the artwork has been dropped in, and the users are loving it. Only one problem - some of your features are a little bit sluggish and you're not sure why.
With Firebug, you'll never again wonder why your code is slow. Using the Firebug profiler, you can separate the tortoises from the hares within seconds.
To use the profiler, just go to the Console tab and click the "Profile" button. Then use your app for a bit or reload the page and then click the "Profile" button again. You'll then see a detailed report that shows what functions were called and how much time each one took.
Logging function calls
Sometimes a problematic function is called so many times that you can't break into the debugger every time. You just want to know when it's called and what parameters were passed in.
To track all calls to a function, just right click on it in the Script tab and choose "Log calls to 'function name'". Then hop over to the Console and watch the calls stream in.
Go directly to line 108, do not pass go
Often times you want to jump directly to a specific line of your script. Doing this couldn't be easier, just type the line number into the quick search box, preceded by the pound sign, as seen in the screen shot on the right.
eval() generated code
in Firebug under the URL of the page they were generated from followed by
event and with
a name derived from their source code. You can breakpoint these functions like any other.
eval() calls appear in the list of files under the
page URL that called
eval(), with a source code summary for the name.
Executable lines are marked
Firebug's Script panel is using green color for a line number if the related line is executable. This way you can always know where to create a breakpoint.
Open in external editor
Individual script files displayed by Firebug can be opened in external editors or IDEs. Firebug also allows to properly configure arguments such as line number, url, etc.