I made a function called test() in javascript file.Placed a simple alert into it.

In html file, called the method on click of a button. But,it was not being invoked.

Problem was in the 11th function, nowhere related to mine !!!! But, how can a person making his first javascript function suppose to find that out ???

I am looking for best ways to debug javascript.

I made a function called test() in javascript file.Placed a simple alert into it.

In html file, called the method on click of a button. But,it was not being invoked.

Problem was in the 11th function, nowhere related to mine !!!! But, how can a person making his first javascript function suppose to find that out ???

I am looking for best ways to debug javascript.

• javascript
• debugging

Share Improve this question Follow edited Sep 8, 2016 at 4:34 Vijay Kumar Chauhan asked Mar 14, 2013 at 9:22 Vijay Kumar ChauhanVijay Kumar Chauhan 32966 silver badges1616 bronze badges 6

• console.log() and alert(). – ATOzTOA Commented Mar 14, 2013 at 9:24
• you can place a breakpoint in js code using debugger statement. – andri Commented Mar 14, 2013 at 9:26
• Possible duplicate – Eich Commented Mar 14, 2013 at 9:44
• I think the best debugging tool is in Chrome right now, just press F12 and start squishing those js bugs :-) Sometimes you might need to debug in other browsers, there are tools for that too - Firebug extension for Firefox and IE has similar tool like Chrome. – Gatekeeper Commented Mar 14, 2013 at 10:48
• 5 Btw if seniors in your pany are resolving problems by menting out whole functions, there might be something wrong :-D sometimes it can be the best way but it seems weird to me that no one there knows about debugging tools... – Gatekeeper Commented Mar 14, 2013 at 10:52

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 5

You can debug javascript using many modern browsers. See this question for details on how to debug in Google Chrome:

How do you launch the JavaScript debugger in Google Chrome?

Furthermore, you shouldn't use alert() for debugging as this can give different results to a production version due to alert() causing a pause in the script.

It is best practice to use console.log() and view the output in the browsers Console.

You can also put debugger in your javascript code to force a breakpoint. However I prefer not to use this as forgetting to remove this before deployment will cause your script to pause, which can be quite embarrassing!

You should use the debug console provided by the browser.

Chrome has it inbuilt, press CTRL + SHIFT + j. In Firefox, install Firebug plugin.

In your code, add alert() to show flow and get values of variables.

Also, use console.log() which will only output to the debug console.

Depending on your browser choice there are debugging options - I tend to use Firefox, so Firebug in my case. There is a question that list options for other browsers - What is console.log and how do I use it?

Unless the project you're working on has already adopted a mechanism for debugging, console.log() tends to be a simple and useful option when tracking down a problem.

Whilst debugging you could take the approach to log out a line when entering a function, like so:

var myFunc = function(el) {
    console.log('Inside myFunc');

    // Existing code
};

This will enable you to see which functions have been called and give you a rough idea of the order of execution.

You can also use console.log() to show the contents of variables - console.log(el);

Be mindful to remove/disable console.log() calls once you're done as it will likely cause some issues in production.

To answer your question within question,

how can a person making his first javascript function suppose to find that out ???

Well, when something is wrong in JavaScript, for example, you made a syntax error - the script will stop working from there. However, this won't stop HTML from rendering on, so it might look as if everything is correct (especially if your JS is not changing the look of the page) but all the functionality of JS will be dead.

That's why we use the debug tools (listed in the other answers here) to see what's wrong, and in cases like this, it's very easy to notice which function has errors and is causing the whole script to break. This would probably have save a few minutes to your seniors as well.

The best approach would be to test frequently so that whenever you run into errors, you can fix them right away.