Web Development

Debug JavaScript with Mozilla's free debugger


Programming errors are a fact of life, but pulling your hair out while tracking down these errors should not be. More robust development languages such as Java and the .NET family of languages have development environments that simplify the process of tracking down problems. JavaScript developers have fewer options, but Mozilla's Venkman JavaScript Debugger provides everything you need. (Venkman is the code name for this 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.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton's column.

---------------------------------------------------------------------------------------

Get weekly development tips in your inbox Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday. Automatically subscribe today!

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

7 comments
aspatton
aspatton

While Venkman development has halted, it is still a powerful tool with an interface rivaling real IDEs. The Firebug tool is definitely a great Firefox add-on and I may be pushed toward its usage in the future, but there are a number of other options available as well. I appreciate, actually encourage, your feedback as we continuously strive to improve the newsletter.

Dano NH
Dano NH

I totally agree that Firebug is THE TOOL!

sentience
sentience

Venkman is an outdated piece of abandonware. If you can even get it to run in current versions of Mozilla and Firefox browsers, its behavior is buggy and its interface obtuse. Firebug is the current JavaScript debugger of choice for the Mozilla stable of browsers. In my view, publishing this sort of article is both careless and irresponsible. Beginners rely on this sort of article to learn the right way to do things, and by leading them astray you not only waste their time but make web development as a discipline less accessible to the masses.

anthony_hrycyk
anthony_hrycyk

I do agree. As a technical writer, information posted on this site by the experts need to be accurate. This is not a witch-hunt. I love this site but please be careful with what the experts post. I want this site to continue to offer advice that is correct at the time of publishing and the advice is 'gods truth'.

dorin_bogdan
dorin_bogdan

I like Aptana, it is a very friendly freeware IDE. I'd like to know if, are there any free debuggers for IExplorer?

Roho
Roho

Venkman's debugger was a great tool and then it stopped being developed. Then along came the far more superior Firebug that not only helps you debug Javascript but shows everything that happens under the hood. If you ever need to find out what's going on or wrong Firebug is THE TOOL. I think it is almost pathetic that an article with this content was published. You can do a lot better then this and you have shown that in the past.

nickbouton-14702284
nickbouton-14702284

I don't know how anyone can suggest using anything but Firebug for debugging client-side scripts, be it CSS, JavaScript, or just plain old HTML. It's a powerhouse of a plugin; it's saved me ages tracking down hard to decipher front end issues. And if you're doing anything AJAX-related, it's truly invaluable. Throw in the Yahoo! UI's YSlow plugin for Firebug to really narrow down where slowdowns are occurring. Hell, even the IE Developer Toolbar (gasp!) is a step up on Venkman.