Debugging of JavaScript

Answer 1

One of my colleague (who does a lot of JS development across multiple browsers) reckons that the debugger in IE8 is very good. Also, the latest Firebug for Firefox 3.6 is a considerable improvement over earlier versions.

EDIT A bit off topic, but one thing that annoyed me with Firebug was the virtual absence of written documentation. I'm sorry, but video presentations just don't cut it, as far as I'm concerned.

Answer 2

Subjective, because what's best for one isn't the best for others.

Personally, I find the easiest/fastest method is to use alerts or writing to a little debug output area (i.e I don't bother with firebug or some system with breakpoints, etc, due to the nature of how the JavaScript is generated).

But I probably only find this way good because I've been doing it for about 10 years, so YMMV.

Answer 3

I really enjoy Visual Studio's JavaScript intellisense and debugging. It is nice to be able to debug step from an javascript event, to an XMLHttpRequest right into my .net handler.

Another really nice aspect of using VWD is debug visualization. You can hover over any object/var and invoke a visualizer that will let you drill down into the object and examine values.

Also, conditional breakpoints, watch windows. In other words you get a large subset of the .net debugging capabilities for JavaScript.

Visual Web Developer Express is free and offers all of this.

Answer 4

I've recently switched from Firebug to Google Chrome as it has some pretty powerful debugging tools built-in (Ctrl+Shift+J to get the Developer Tools window open), including break-points.

I've also used logging/tracing to great effect. Some examples:

• When the code runs without syntax errors but does not do what I expect, I can log messages (e.g. "here1", "here2", etc.) to the console to see what is going on (can also be done by stepping through with the debugger, but that may be harder if your logic is in some crazy loop or something that takes a while to step through).
• When the blocking nature of an alert box or breakpoint would break the code I'm debugging. This happens a lot when I have multiple timer intervals set. Alert boxes are also painful to use in long loops (and breakpoints can be too).
• When I want to see what value a certain variable has at one point in the code. If it's a one time thing, then breakpoints are great for this (better, even, because I can check the value of any variable in that context), but if that code is being executed often and I only care about, say, the third time it's executed after I click on a certain link, then logging is very helpful. I can ignore the output I don't want (or clear if it's in the way) and concentrate only on the output I'm interested in.

Answer 5

Modern browsers include built-in debugging tools. In IE, hit F12 (Tools > Developer Tools), go to the Script tab and hit Start Debugging. It will break on an error and you can set breakpoints. I've found that IE8's Developer Tools are extremely useful.

In Chrome, it's Ctrl+Shift+J (Page > Developer > JS Console) and click the pause stop sign ("pause on exceptions") button. You can also set breakpoints.

Answer 6

I mostly develop for FireFox, so I'm inclined to use tools on that platform.

I really like Venkman JavaScript Debugger, but it's not compatible with the newer versions of FireFox AFAIK.

As others have said, FireBug is basically the go-to tool for most people these days...

I would say become familiar with at least one tool in each of the main browsers, then pick whatever your favorite is to use as your "main" tool, using the others only to track down problems in their respective platforms.

Answer 7

I rarely use a debugger and tend to prefer logging, for which I use my own log4javascript. It works consistently in all mainstream browsers, including IE 6 (and in fact IE 5 and 5.5), and by default displays logging messages in a separate console window, which allows you to filter log messages by severity, search log messages (optionally using a regular expression) and more. It can also send log messages to the server using Ajax.

Example 1: Hello world

var log = log4javascript.getDefaultLogger();
log.info("Hello world");

displays

19:52:03 INFO  - Hello world

Example 2: Logging an error with a message

try {
   throw new Error("Faking something going wrong!");
} catch (e) {
    log.error("An error occurred", e);
}

displays

19:52:32 ERROR - An error occurred
Exception: Faking something going wrong! on line number 80 in file basic.html

Example 3: Logging multiple messages with one logging call

var a = "Hello";
var b = 3;
log.debug(a, b);

displays

19:53:05 DEBUG  - Hello 3

Example 4: Logging an object

var obj = new Object();
obj.name = "Octopus";
obj.tentacles = 8;
log.info(obj);

displays

19:53:17 INFO  - {
    name: Octopus,
    tentacles: 8
}