In the past I covered a Javascript for Firefox debugger. As stated in this It's a small world after all, Venkman requires a rather steep learning curve. That’s why I was more a fan of the old alert method. “Was”, because I’ve recently discovered Firebug. The author claims to have been inspired by Venkman, View Rendered Source Chart, Console2, Aardvark and MochiKit JavaScript Interpreter. The result is a debugger that can handle JavaScript, CSS, HTML and Ajax.
Installation is, typically enough for a Firefox extension, really easy and after restarting Firefox you will see a green check box
or worse a red cross at the bottom of the screen. When you click on it you’ll see the console with the errors, where appropriate. You will see the errors, where they happened in the code and which JS functions were executed before and during the errors.
Console
The console is not only meant for showing errors, but is also very helpful for logging things in the coding process. As said, you can do things with the classic alert with the unwanted side effect that one needs to click on the OK button of the popup. That’s OK if it only happens a few times, but if you want to know what’s happening in a loop, you end up with a lot of these popups.
Firebug gives an alternative with the console.log command. Console.log(avar) will show in the console the value of the avar variable.
One can choose the type of logging too. Console.info, console.warning and console.error will show stuff respectively as info, warning and error, which is pretty obvious. The difference between all these lies in the representation of the logged item.
a = "This is an example of a(n)"; console.info("%s info",a); console.warn("%s warning",a); console.error("%s error",a);
will result in
You can see that you can also combine text and variable as in most common scripting languages.
Interactivity
Showing things in the console isn’t what you might expect of a modern tool. Interactive debugging is something that one would expect and that many of the ABAP- and BSPers among you are familiar with. Firebug has a similar feature. You only need to add the debugger keyword to your code:
debugger;
a = "This is an example of a(n)"; console.info("%s info",a);
console.warn("%s warning",a); console.error("%s error",a);The above code will give some problems with the debugger though. You cannot debug the variable a since it’s not properly defined. You need to define it as a variable, thus
var a = "This is an example of a(n)";When you execute this, you will get a familiar debugging screen where you can set breakpoints, step over the code, etc. One is not only able to trace all the variables but also all the DOM info
There are also other means of debugging. You can leave out the debugger keyword and show the debug screen only when errors occur. You will need to set the option Break on Error in the option menu in order to achieve this.
There are some other features such as assertions, time measurements to see how long things take, log Ajax traffic and even a basic ability to edit DOM objects.
Conclusion
This is a very handy tool which makes the life of the JS developer so much easier. Together with Chris Pederick's Web Developer Toolbar (see my Letting the cat out of the bag web log) this is a must for every web developer (on Firefox).
Btw. Don’t despair too much though if you don’t have Firefox. MIE has some possibilities too, but not for the faint hearted though.
2 Comments
