Silicon Forks » Documentation » Debugging JavaScript

This document provides a brief summary of techniques for debugging JavaScript in various popular web browsers.

The instructions assume that you are running Microsoft Windows, but most of the techniques will work on any operating system.

Firefox

To view JavaScript error messages, you can launch Firefox's error console by selecting ToolsError Console from the Firefox main menu. You may wish to set the preference javascript.options.strict to true to get additional JavaScript warnings. (But note that this will reduce performance.)

Alternatively, you can install the Firebug extension. Firebug provides a Console tab which will display JavaScript errors. Firebug also provides a JavaScript debugger to execute JavaScript code one line at a time, examine the values of variables, and so on.

To log information to the Firebug console, use the console.log function:

var x = 123;
console.log("x = " + x);

Another useful tool for Firefox is the Web Developer extension.

To view the generated HTML source of a document, you have several alternatives:

Internet Explorer

To view JavaScript error messages, select Internet OptionsAdvanced. The "Display a notification about every script error" option should be checked.

IE 6 and IE 7

The best JavaScript debugger for IE 6 and IE 7 is the Microsoft Script Editor which comes with Microsoft Office. To enable debugging in IE, select Internet OptionsAdvanced and ensure that the "Disable script debugging" checkboxes are unchecked.

To view the generated HTML source for a document, install the IE Developer Toolbar. This provides a tree view of the DOM of the generated HTML source.

JavaScript code can cause memory leaks in Internet Explorer. The JavaScript Memory Leak Detector can locate JavaScript code that causes memory leaks.

IE 8

IE 8 includes a Developer Tools window that can act as a JavaScript debugger. To launch Developer Tools, do either of the following:

To debug JavaScript, select the Script tab in the Developer Tools window, and press the Start Debugging button. Then, in Internet Explorer, navigate to the URL you wish to debug.

You can view the generated HTML source for a document in the HTML tab of the Developer Tools window.

Opera

To view JavaScript error messages, launch Opera's error console: select ToolsAdvancedError Console.

To log information to the error console, use the opera.postError function:

var x = 123;
opera.postError("x = " + x);

You can launch Opera's Dragonfly debugger (in version 9.5 or greater) from the main menu by selecting ToolsAdvancedOpera Dragonfly. (In older versions: ToolsAdvancedDeveloper Tools.)

Safari

Safari (version 3.1 or greater) comes with a Develop menu. To enable the Develop menu, open Preferences and select the Advanced tab. The "Show Develop menu in menu bar" option should be checked.

To view JavaScript error messages, from the main menu, select DevelopShow Error Console.

To write to the JavaScript console, use the console.log function:

var x = 123;
console.log("x = " + x);

Safari (version 3.1 or greater) comes with Web Inspector. You can launch Web Inspector from the main menu by selecting DevelopShow Web Inspector or from the context menu by selecting Inspect Element. In Web Inspector, the Elements tab displays the DOM of a document. The Scripts tab provides a JavaScript debugger.

Google Chrome

Like Safari, Google Chrome comes with Web Inspector. You can launch Web Inspector from the main menu by selecting DeveloperJavaScript console, or you can use the context menu and select Inspect Element.

Copyright © 2008, 2009, 2010 Silicon Forks siliconforks.com
Last updated April 24, 2010
siliconforks@siliconforks.com