Debugging of JavaScript [duplicate]

Question

I come from Java Background and so used to Debugging using Eclipse but have recently started on JavaScript(jQuery in particular) and am having really hard time debugging JavaScript Code so my question is

What are the best ways of Debugging JavaScript ?

I have tried using Firebug and it is good, but wanted to know

If we have any other useful tools or stratergies for Debugging JavaScript ?

Answer 1

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 2

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 3

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
}