Go4Expert

Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/articles/javascript-tutorials/)
-   -   Debugging JavaScript with Debugger from Mozilla (http://www.go4expert.com/articles/debugging-javascript-debugger-mozilla-t5426/)

pradeep 24Jul2007 08:46

Debugging JavaScript with Debugger from Mozilla
 
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 (http://www.mozilla.org/projects/venkman/) 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.

Code:

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.


All times are GMT +5.5. The time now is 04:37.