Dr. Dobb's is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.


Channels ▼
RSS

Tools

AJAX Debugging with Firebug


Breakpoint Debugging

Firebug's Script tab contains a powerful debugger that lets you pause JavaScript execution on any line. You can then step forward line-by-line to analyze how the state of the program changes in real time. Breakpoints need not be triggered indiscriminately; Firebug lets you specify the circumstances under which a breakpoint is triggered.

Setting Breakpoints

The simplest way to set a Firebug breakpoint is to find the desired script in the Script tab, then click on the number of the line at which execution should stop. The debugger pauses execution upon reaching that line and shows you the current call stack (Figure 2). The watch pane on the right lets you inspect the value of local variables. If the value is an object, you can click on the object to view its properties, just as you can in all other Firebug contexts. You can also enter arbitrary JavaScript expressions and trace their values as execution progresses.

[Click image to view at full size]

Figure 2: Debugger with breakpoint set and execution paused.

While the debugger is stopped, the Firebug toolbar contains a horizontal view of every function in the call stack. Click a function to move to the file and line where its execution stopped and inspect the local variables in that context.

Conditional Breakpoints

Sometimes you'd rather not have the debugger stop every time a line is hit, but rather, only when certain conditions are true. Right-click a line number in Firebug's Script tab to open a little bubble where you can enter a JavaScript expression. The debugger pauses execution only when the expression evaluates to be true.

Error Breakpoints

One of the most common reasons to use the debugger is to investigate an error that you weren't expecting. When an error occurs in JavaScript, a detailed description of the error is logged to Firebug's Console. After reading the message, you might wish you could have been in the debugger when the error occurred so that you could inspect the objects and call stack when it occurred.

Error messages have a red button that you can toggle to set a special kind of breakpoint that stops whenever the exact error occurs again. Toggle this button on, then try to reproduce the error. Firebug switches you to the debugger when it happens.

Sometimes, Firebug can save you the trouble of having to reproduce the error. Error messages have an attached stack trace that you can see by expanding the description. The trace exposes not only the names of the functions on the stack, but also the values of each of the arguments that were passed to each function.

The debugger Keyword

When working in your editor, it's sometimes easier to locate the spot where you want to set a breakpoint than to switch to Firebug and find it separately. JavaScript has the built-in keyword debugger, which comes in handy. Put the debugger keyword on any line where you want the debugger to stop, and script execution pauses when that line is reached—just as if you'd set a breakpoint within Firebug.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.