Debugging JavaScript

  • Revision slug: Debugging_JavaScript
  • Revision title: Debugging JavaScript
  • Revision id: 77528
  • Created:
  • Creator: Yoshino
  • Is current revision? No
  • Comment Migration (http://www.mozilla.org/docs/web-developer/js/debugging/)

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.

Error Console

First thing you should check when there's a problem. To be found under Tools menu.

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.

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.

dump()

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>; and to have a native console at all under MS Windows, you need to start Mozilla via mozilla.exe -console. Using normal JS object inspection, you can write a function that dumps a whole object, similar to this {{template.Source("extensions/sroaming/resources/content/transfer/utility.js#426", "ddumpObject()")}}.

Call stack

You can print the current call stack (which functions were called to reach the current point) using the keyword debugger. You can also try using Components.stack, which presumably only works in Mozilla from chrome (not webpages).

Original Document Information

  • Author(s): Ben Bucksch
  • Last Updated Date: September 12, 2005
  • 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 name="Error_Console"> <a href="en/Error_Console">Error Console</a> </h3>
<p>First thing you should check when there's a problem. To be found under Tools menu.
</p>
<h3 name="JavaScript_Debugger_.28Venkman.29"> <a href="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">Venkman Introduction</a> explains its use.
</p>
<h3 name="DOM_Inspector"> <a href="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 <kbd>Ctrl-Shift-I</kbd>, you can inspect the page currently loaded in the browser.
</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.
</p>
<h3 name="dump.28.29"> <code>dump()</code> </h3>
<p>Allows you to print text on the native console. Use <code>\n</code> to output a newline at the end. 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;; and to have a native console at all under MS Windows, you need to start Mozilla via <code>mozilla.exe -console</code>. Using normal JS object inspection, you can write a function that dumps a whole object, similar to this {{template.Source("extensions/sroaming/resources/content/transfer/utility.js#426", "ddumpObject()")}}.
</p>
<h3 name="Call_stack"> Call stack </h3>
<p>You can print the current call stack (which functions were called to reach the current point) using the keyword <a class="external" href="http://www.mozilla.org/scriptable/javascript-stack-dumper.html"><code>debugger</code></a>. You can also try using <a href="en/Components.stack">Components.stack</a>, which presumably only works in Mozilla from chrome (not webpages).
</p>
<div class="originaldocinfo">
<h2 name="Original_Document_Information"> Original Document Information </h2>
<ul><li> Author(s): Ben Bucksch
</li><li> Last Updated Date: September 12, 2005
</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>
Revert to this revision