Script Debugging

From FirebugWiki

Revision as of 08:42, 16 September 2013 by Sebastianz (Talk | contribs)
(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.

Contents

[edit] Console Panel

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

[edit] 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.

[edit] Logging user-defined info

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

[edit] 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.

[edit] Script Panel

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

[edit] 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.

[edit] Breakpoints

Breakpoints in Firebug are used to debug JavaScript code. They will stop script execution at a specific point and give you control over script execution.

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. Not only the Script panel allows setting breakpoints, but also several other panels like e.g. the Net or the HTML Panel allow setting panel-specific breakpoints. 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 item inside the panel.

Currently you can create these types of breakpoints:

Type Panel Description
Script Breakpoints Script Panel Trigger when the line inside the Script is reached
Error Breakpoints Console Panel Trigger on a specific JavaScript error
HTML Breakpoints HTML Panel Trigger on HTML manipulation
DOM Breakpoints DOM Panel Trigger on DOM property manipulation
XHR Breakpoints Net Panel Trigger on XMLHttpRequests
Cookie Breakpoints Cookies Panel Trigger on cookie manipulation

Some panels even allow you to set a condition for a breakpoint to control when it triggers. 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.

[edit] debugger; keyword

To stop script execution at a specific line inside your code you can use the debugger; keyword. As soon as this line is reached, the execution is halted, Firebug switches to the Script Panel and a break notification is shown.

Example:

  function test(variable) {
    for(var i=0; i<10; i++) {
      if(i == 5)
        debugger;
    }
  }

[edit] 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.

[edit] 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.

[edit] See also

Personal tools