JavaScript Debugger Firefox Plugin
June 29, 2007 Internet Browsers, JavaScript, Mozilla, Tips & Tricks, Troubleshooting, Utilities
If anyone of you is a Web Developer you should have certainly experienced a dreadful experience with the Client-Side Scripting languages such as JavaScript, VBScript and JScript. All these scripting languages are NOT actually independent languages. They’re merely a integrated version of the Browser you’re using and also varies in functions, objects and some syntax from browser to browser. But I’m not talking about that dreadful thing which I think is impossible to solve until every browser copes up with W3C Standards and design Scripting Languages that share the same functions and objects everywhere. But I’m talking about a more dreadful thing, Debugging! You all knew very well (if you’re a software developer) what Debugging means and why it’s so important.
Finally there is a solution from Mozilla for debugging JavaScript inside Firefox. I don’t know how many of you knew the Error Console in Firefox. That’s an useful utility available from Tools -> Error Console that displays all JavaScript and CSS errors in a document you’re browsing and allows you to go the pinpoint location of the error by just double clicking on the Error listing (a GREAT feature I should say which is more useful than IE’s dreadful JavaScript error Messages Popup that does nothing but annoys us very much). I’ve been using this Error Console only for a long period of time to debug JavaScript errors. But now, I should say, I’m very much relieved to see Mozilla has came up with a solution for debugging JavaScript.
It’s named Venkman JavaScript Debugger and it’s available as an Add On (Extension) to the Firefox Browser.
This debugger has it’s origins in Netscape’s JavaScript Debugger and offers both Graphic and Console level debugging. It also 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.
To know how to debug JavaScript with this extension and more details on any usage you might have in mind, please visit the official Venkman Walkthrough provided by Mozilla.
Let me know your comments as usual…
