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.
To view JavaScript error messages, you can launch Firefox's error console by selecting
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 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:
To view JavaScript error messages, select
→ . The "Display a notification about every script error" option should be checked.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 → 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 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
tab in the Developer Tools window, and press the 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
tab of the Developer Tools window.To view JavaScript error messages, launch Opera's error console: select
→ → .
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 → → . (In older versions: → → .)
Safari (version 3.1 or greater) comes with a
menu. To enable the menu, open and select the tab. The "Show Develop menu in menu bar" option should be checked.To view JavaScript error messages, from the main menu, select
→ .
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 → or from the context menu by selecting . In Web Inspector, the tab displays the DOM of a document. The tab provides a JavaScript debugger.
Like Safari, Google Chrome comes with Web Inspector. You can launch Web Inspector from the main menu by selecting
Copyright © 2008, 2009, 2010 → , or you can use the context menu and select . siliconforks.com