Debug JavaScript - Firefox, IE , Opera, Safari , Chrome

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. (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:

• 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.
 

------- Click below on more for IE6, IE7, IE8, Opera , Safari and Chrome debug information-------

 

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 either of the following:

• Select Tools → Developer Tools from the main menu or toolbar.
• Press 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);

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

• The Scripts tab provides a JavaScript debugger.
• The DOM tab displays a tree view of the generated HTML source of a document.
• The Error Console tab shows error messages.

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 Develop → Show 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 Develop → Show 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 Developer → JavaScript console, or you can use the context menu and select Inspect Element.