Script Debugging

From FirebugWiki
Revision as of 01:01, 31 May 2012 by Sebastianz (Talk | contribs) (Description for how to debug JavaScript code)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

To debug your JavaScript code the Console and Script Panel come in handy. They allow you to step-debug your code, profile performance, log errors and information and much more.

Console Panel

The Console panel allows you to log different kind of information and shows you errors and warnings your scripts are causing.

Logging errors and warnings

To enable the logging of debug information Show JavaScript Errors and Show JavaScript Warnings need to be checked via the the options menu. Furthermore you can check Show Stack Trace With Errors and Strict Warnings (performance penalty). (Note: The latter can cause performance issues due to huge amounts of logged messages.) From now on all errors and warnings within the JavaScript code of a page will be listed inside the console including the position inside the code where the error or warning occurred. In case you enabled Show Stack Trace With Errors a little twisty is shown besides runtime errors. Clicking it will expand the stack trace allowing you to inspect where the error came from. Runtime errors also allow you to set a breakpoint on them to stop the script execution as soon as they are happening. To do so click the semitransparent red dot at the left side of the source sample. Clicking the source link at the right-hand side of a log message will switch to the Script Panel and highlight the line inside the code where the error or warning occurred.

Logging user-defined info

The Console Panel also allows to log messages by your own. Therefore it injects a very powerful API.

Performance measuring

There is an integrated Profiler, which allows measuring the performance of the functions inside the code and gives detailed information about the timing.

Script Panel

The Script panel and its side panels allow step-debugging your code and give various information to each stack frame.

Ways to break script execution

To be able to debug your code the script execution needs to be stopped at a specific point in your code. There are several ways to achieve that.


Normally you will set breakpoints by clicking the Breakpoint Column at the left side of the line you want to start debugging inside the Script Panel. But not only the Script panel allows setting breakpoints but also several other panels like e.g. the Net or the HTML Panel. If the panel has a Breakpoint Column you will be able to click on it like inside the Script panel. Or you can add a breakpoint via the context menu of an element inside the panel.

Some breakpoints even allow you to set a condition to control when they trigger. This can be done by right-clicking the Breakpoint Column and entering the condition in the upcoming editor.

The set breakpoints can be managed via the Breakpoints Side Panel.

debugger; keyword

When you write debugger; somewhere inside your code, the script execution will be stopped automatically as soon as it hits that line.

Break On ...

The Break On ... feature allows you to stop the script execution as soon as a specific event occurs. Several panels have a Break On ... button, which will break the script execution as soon as a specific event occurs.

Step debugging

As soon as the script execution is halted inside your code, you get detailed information about the current status via the Watch and Stack Side Panel and within the Script Panel itself.

The Script Panel will show a stack frame path at its panel toolbar. Clicking an item of this path allows you to switch between the different stack frames and inspect the variables set within that frame via the Watch Side Panel. You can also use the Stack Side Panel to inspect the different stack frames. There you will also see the script name and line number of each frame and the parameters in case the called function had some.

While the execution is halted you will be able to control the execution via the Execution Control Buttons. Stepping to the next stack frame will show you all the information related to that frame inside the Watch Side Panel. Also you can get that info by hovering variables and functions within the Script panel.

See also