Debugging JavaScript

  • Revision slug: Debugging_JavaScript
  • Revision title: Debugging JavaScript
  • Revision id: 77542
  • Created:
  • Creator: madarche
  • Is current revision? No
  • Comment Wording; 1 words added

Revision Content

This document is intended to help developers writing JavaScript code in Mozilla, mainly for Mozilla itself, but it may also be useful for web developers. It should give pointers to tools, aids and tricks which make debugging your code easier.

Web Console

This is the first place to go; open the Web console using the Web Console option in the Tools menu. This opens the console in the top portion of your browser window.

Error Console

On versions of Firefox predating the Web Console, this is the first thing you should check when there's a problem. You can get to this by choosing the Error Console menu item under the Tools menu or using -jsconsole on the command line.

JavaScript Debugger (Venkman)

Allows you to stop a script at predefined breakpoints, inspect variables etc.. A Venkman Introduction explains its use.

DOM Inspector

Shows the current state of the DOM (page/dialog structure as objects). Other modes of the right pane show the styles applied to the elements as well as the associated JavaScript objects. The button on the top left allows you to pick an element in the live page. With Ctrl-Shift-I, you can inspect the page currently loaded in the browser.

Chromebug

An adaptation of Firebug to XUL, Chromebug integrates DOM inspection and JavaScript debugging. See the Chromebug User Guide

Strict code checking

If you set the pref javascript.options.strict to true, the JavaScript engine gives you more types of warnings on the Error Console, most of which hint at code bugs that are easy to oversee or even bad syntax. (The pref also warns on common JavaScript idioms that are not errors).

dump()

The dump() function allows you to print text on the native console. Use \n to output a newline at the end.

To see anything, you need to set the pref browser.dom.window.dump.enabled to true, e.g. in <about:config> (add new pref, it doesn't exist per default).

Under MS Windows you additionally need to start Firefox via the following command to have a native console :

firefox.exe -console

Using normal JavaScript object inspection, you can write a function that dumps a whole object, similar to this ddumpObject().

log4moz

This is a partial implementation of the Log4* interfaces (for example, see log4j or log4net).

Call stack

You can halt Venkman or Chromebug at a line using using the keyword debugger. In debug builds this also dumps a stack trace to the console, even when the debugger is not running. In extensions you can print the callstack using Components.stack like this:

function getStackDump() {
  var lines = [];
  for (var frame = Components.stack; frame; frame = frame.caller)
    lines.push(frame.filename + " (" + frame.lineNumber + ")");

return lines.join("\n");
};

Original Document Information

  • Author(s): Ben Bucksch
  • Created Date: September 12, 2005, Last Updated Date: November 10, 2009
  • Copyright Information: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | Details.

 

Revision Source

<p>This document is intended to help developers writing JavaScript code in Mozilla, mainly for Mozilla itself, but it may also be useful for web developers. It should give pointers to tools, aids and tricks which make debugging your code easier.</p>
<h3><a href="/en/Using_the_Web_Console" title="en/Using the Web Console">Web Console</a></h3>
<p>This is the first place to go; open the Web console using the Web Console option in the Tools menu. This opens the console in the top portion of your browser window.</p>
<h3 name="Error_Console"><a href="/en/Error_Console" title="en/Error_Console">Error Console</a></h3>
<p>On versions of Firefox predating the Web Console, this is the first thing you should check when there's a problem. You can get to this by choosing the Error Console menu item under the Tools menu or using <span style="font-family: Courier New;">-jsconsole</span> on the command line.</p>
<h3 name="JavaScript_Debugger_.28Venkman.29"><a href="/en/Venkman" title="en/Venkman">JavaScript Debugger (Venkman)</a></h3>
<p>Allows you to stop a script at predefined breakpoints, inspect variables etc.. A <a href="/en/Venkman_Introduction" title="en/Venkman_Introduction">Venkman Introduction</a> explains its use.</p>
<h3 name="DOM_Inspector"><a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a></h3>
<p>Shows the current state of the DOM (page/dialog structure as objects). Other modes of the right pane show the styles applied to the elements as well as the associated JavaScript objects. The button on the top left allows you to pick an element in the live page. With <code>Ctrl-Shift-I</code>, you can inspect the page currently loaded in the browser.</p>
<h3>Chromebug</h3>
<p>An adaptation of Firebug to XUL, Chromebug integrates DOM inspection and JavaScript debugging. See the <a class=" external" href="http://getfirebug.com/wiki/index.php/Chromebug_User_Guide" title="http://getfirebug.com/wiki/index.php/Chromebug_User_Guide">Chromebug User Guide</a></p>
<h3 name="Strict_code_checking">Strict code checking</h3>
<p>If you set the pref <code>javascript.options.strict</code> to true, the JavaScript engine gives you more types of warnings on the Error Console, most of which hint at code bugs that are easy to oversee or even bad syntax. (The pref also warns on common JavaScript idioms that are not errors).</p>
<h3 name="dump.28.29"><code>dump()</code></h3>
<p>The <code>dump()</code> function allows you to print text on the native console. Use <code>\n</code> to output a newline at the end.</p>
<p>To see anything, you need to set the pref <code>browser.dom.window.dump.enabled</code> to true, e.g. in &lt;about:config&gt; (add new pref, it doesn't exist per default).</p>
<p>Under MS Windows you additionally need to start Firefox via the following command to have a native console :</p>
<pre>firefox.exe -console
</pre>
<p>Using normal JavaScript object inspection, you can write a function that dumps a whole object, similar to this <code><a class="external" href="http://mxr.mozilla.org/mozilla/source/extensions/sroaming/resources/content/transfer/utility.js#426" title="http://mxr.mozilla.org/mozilla/source/extensions/sroaming/resources/content/transfer/utility.js#426">ddumpObject()</a></code>.</p><h3><a class=" link-https" href="https://wiki.mozilla.org/Labs/JS_Modules#Logging" title="https://wiki.mozilla.org/Labs/JS_Modules#Logging">log4moz</a></h3>
<p>This is a partial implementation of the Log4* interfaces (for example, see <a class="external text" href="http://logging.apache.org/log4j/1.2/index.html" rel="nofollow">log4j</a> or <a class="external text" href="http://logging.apache.org/log4net/" rel="nofollow">log4net</a>).</p>
<h3 name="Call_stack">Call stack</h3>
<p>You can halt Venkman or Chromebug at a line using using the keyword <a class="external" href="http://www.mozilla.org/scriptable/javascript-stack-dumper.html"><code>debugger</code></a>. In debug builds this also dumps a stack trace to the console, even when the debugger is not running. In extensions you can print the callstack using <code><a href="/en/Components.stack" title="en/Components.stack">Components.stack</a></code> like this:</p>
<pre class="brush: js">function getStackDump() {
  var lines = [];
  for (var frame = Components.stack; frame; frame = frame.caller)
    lines.push(frame.filename + " (" + frame.lineNumber + ")");<p>return lines.join("\n");<br>};</p></pre>
<div class="originaldocinfo">
<h2 name="Original_Document_Information">Original Document Information</h2>
<ul> <li>Author(s): Ben Bucksch</li> <li>Created Date: September 12, 2005, Last Updated Date: November 10, 2009</li> <li>Copyright Information: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.</li>
</ul>
</div>
<div id="livemargins_control" style="position: absolute; display: none; z-index: 9999;"><img alt="" height="5" src="chrome://livemargins/skin/monitor-background-horizontal.png" style="position: absolute; left: -77px; top: -5px;" width="77">	<img alt="" src="chrome://livemargins/skin/monitor-background-vertical.png" style="position: absolute; left: 0pt; top: -5px;">	<img alt="" id="monitor-play-button" src="chrome://livemargins/skin/monitor-play-button.png" style="position: absolute; left: 1px; top: 0pt; opacity: 0.5; cursor: pointer;"></div>
<p> </p>
<div id="livemargins_control" style="position: absolute; display: none; z-index: 9999;"><img alt="" height="5" src="chrome://livemargins/skin/monitor-background-horizontal.png" style="position: absolute; left: -77px; top: -5px;" width="77">	<img alt="" src="chrome://livemargins/skin/monitor-background-vertical.png" style="position: absolute; left: 0pt; top: -5px;">	<img alt="" id="monitor-play-button" src="chrome://livemargins/skin/monitor-play-button.png" style="position: absolute; left: 1px; top: 0pt; opacity: 0.5; cursor: pointer;"></div>
<div id="livemargins_control" style="position: absolute; display: none; z-index: 9999;"><img alt="" height="5" src="chrome://livemargins/skin/monitor-background-horizontal.png" style="position: absolute; left: -77px; top: -5px;" width="77">	<img alt="" src="chrome://livemargins/skin/monitor-background-vertical.png" style="position: absolute; left: 0pt; top: -5px;">	<img alt="" id="monitor-play-button" src="chrome://livemargins/skin/monitor-play-button.png" style="position: absolute; left: 1px; top: 0pt; opacity: 0.5; cursor: pointer;"></div>
Revert to this revision