Debug JavaScript with Mozilla’s free debugger

Venkman JavaScript Debugger

This debugger, which has its origins in Netscape’s JavaScript debugger, is available as an add-on for Mozilla. Venkman JavaScript Debugger is both a graphic and a console debugger. Once you download and install Venkman JavaScript Debugger, it is available via the Tools | Web Development | JavaScript Debugger menu. This add-on allows you to view and debug JavaScript located in source files or within a Web page. It provides the following features:

• Breakpoint management: Breakpoints allow you to stop code execution at specific points within the source code. You can set and clear breakpoints within the tool, allowing you to easily control program flow while debugging. Double-clicking breakpoints opens its corresponding file with the breakpoint line highlighted.
• Call stack inspection: This feature provides a peek at what is being called when a script runs. Double-clicking an item in the call stack opens its containing file and highlights the line corresponding to the entry in the call stack.
• Variable/object inspection: This feature allows you to view the values of variables and objects during script execution.
• View source code: The script view within the debugger interface provides a view of the JavaScript code being debugged.
• Execute JavaScript code: You may enter and run your own JavaScript within the debugger.

The views of the call stack, open files, and variables/objects are presented as trees. Any item with a twisty icon next to it contains children and is expandable to view its child objects. The toolbar contains buttons for working with the basic debugging features, which include the following:

• Stop: Halts the execution of the current script. It is only active and available when a script is running.
• Continue: Allows you to resume script execution once it has been stopped via a breakpoint.
• Step Over: Allows you to step over a function call. It is available when stepping through a script line-by-line, and it allows you to skip going into a function’s code when it is called. The call to the function proceeds, and you proceed to the line following the function call.
• Step Into: Runs one statement at a time. After stepping through a statement, you can see its effect in the other debugging windows. Also, this allows you to step into the body of a function when/if it is called.
• Step Out: Executes the rest of the current function, with execution stopping at the line that called it. (This is only when Step Into is used and execution moves to a called function.)
• Profile: Enables or disables code profiling of the currently running script.

Debugging a file with Venkman JavaScript Debugger

Debugging your JavaScript is a straightforward process with Firefox and Venkman JavaScript Debugger. First, you load the page to be debugged into Firefox. Once it loads, you start the debugger via the Tools menu, and it opens with the current page in the list of files.

You can navigate the page within the list of files and double-click to expand and view the files it contains. This will include external JavaScript files loaded into the page. You can double-click on the JavaScript files to view their source and use the debugger features on it.

As an example, you may set breakpoints and return to the browser window and interact with the page, thus triggering JavaScript execution with it stopping when/if breakpoints are encountered. At that point, you may continue execution via the debugger options (Step Into, Step Over, and so forth) and monitor variables and objects as well. Another great feature of the debugger is profiling code to pinpoint inefficient code.

Profiling with Venkman JavaScript Debugger

The profiling features of Venkman JavaScript Debugger allow you to monitor code execution and track down any bottlenecks where code is less than efficient. The Profile drop-down menu allows you to start collecting, clear profiling data, and save profile data. Profiling data may be saved as HTML, XML, text, or a comma-delimited file.

The following code contains a portion of sample data collected via the profiling feature. It includes the source file name along with the window of execution time, the name of the function used including line numbers in source code, the total calls to the function during execution, and the total time of execution.

prototype.js: 750 - 2500 milliseconds
Function Name: [from] (Lines 489 - 498)
Total Calls: 2 (max recurse 0)
Total Time: 2359.38 (min/max/avg 0/2359.38/1179.69)
Time (ex. calls): 2359.38 (min/max/avg 0/2359.38/1179.69)

The profiling data allows you to spot code and functions that may adversely affect code performance.

Track down problems with Venkman JavaScript Debugger

JavaScript developers need Venkman JavaScript Debugger for Mozilla. The add-in allows you to easily step through code execution, monitor variables and objects, and locate any code that may adversely affect performance. The best feature of Venkman JavaScript Debugger is its price tag — it is freely available for use with the various iterations of the Mozilla-based browsers such as Firefox. As a longtime developer, I love this debugger because it greatly simplifies the process of debugging JavaScript code.