» 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 Tools → Error Console from the Firefox main menu. You may wish to set the preference javascript.options.strict to true to get additional JavaScript warnings.

Alternatively, you can install the Firebug extension. Firebug provides a Console tab which will display JavaScript errors. (Note: if you are using Firefox 3, you need to install the latest beta version of Firebug.) 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:

• Select Edit → Select All from the Firefox main menu, then click the right mouse button and select View Selection Source from the context menu.
• Install the Firebug extension. Firebug's HTML tab shows the Document Object Model (DOM) of the generated HTML source of a document.
• Install the Web Developer extension. From the Web Developer menu, select View Source → View Generated Source.

Internet Explorer

To view JavaScript error messages, select Internet Options → Advanced. 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 Options → Advanced 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 any of the following:

• Select Tools → Developer Tools from the main menu.
• Click on the Developer Tools icon.
• Press Shift-F12.

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 Tools → Advanced → Error console.

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

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

Opera 9.2x

You can install two tools that are useful for debugging:

• The DOM Snapshot tool allows you to view the generated HTML source of a document.
• The Opera Developer Console tool allows you to view and edit the DOM of the generated HTML source of a document, view and edit CSS rules, view JavaScript objects, and observe HTTP requests.

Opera 9.5

With Opera 9.5, you can use the new Opera Dragonfly debugger. You can launch Dragonfly from Opera's main menu by selecting Tools → Advanced → Developer Tools.

• The Script tab provides a JavaScript debugger.
• The DOM tab displays a tree view of the generated HTML source of a document.
• The Console tab shows error messages (like Opera's error console).

Safari

Safari 3.0

To view JavaScript error messages, configure Safari to display the Debug menu. Then select Debug → Show JavaScript Console.

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

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

Safari 3.1

Safari 3.1 comes with a Develop menu. To enable the Develop menu, select Edit → Preferences and select the Advanced tab. The "Show Develop menu in menu bar" option should be checked.

To view JavaScript error messages, select Develop → Show Error Console.

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

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

Safari 3.1 comes with Web Inspector, a tool for displaying the DOM of a document. You can launch Web Inspector by selecting Develop → Show Web Inspector or by selecting Inspect Element from Safari's context menu.

WebKit is Safari's rendering engine. You can download a nightly build of WebKit and run it in Safari. On Windows, unpack the WebKit ZIP archive and execute the run-nightly-webkit.cmd file.

Nightly builds of WebKit come with a JavaScript debugger integrated in the Web Inspector. To start the debugger, launch the Web Inspector and select Scripts.

Copyright © 2008 siliconforks.com
Last updated May 29, 2008
siliconforks@siliconforks.com