How do you debug Javascript applications?

Question

I work in an application that is JavaScript intense. So to debug , I end up using many alerts. Are there other better ways to debug ? What methods do you use ?

Answer 1

Use Firefox as your main development platform and open the Web Console. Error messages are printed there.

Chrome also has a console, but it doesn't have Firebug, a Firefox add-on used for web development. While the Web Console that comes with Firefox will display errors in Javascript, Firebug will also help with inspecting the HTML for your page, and there are even extensions to Firebug like Flashbug for working with Flash components on your page.

Obviously you'll want to check your web apps in all browsers eventually, but do most of your developing in Firefox.

Answer 2

For JavaScript, debugging is a sinch in most browsers:

IE - Where you really need to debug, F12 is the console. You can call console.log, console.debug, console.error and a few others, and it will print out good data. When you call console.log on an object, good consoles will print out the property break-down of the object. There's also an active dom inspector so that you can see what's going on as the script is running.

• Firefox - Get the Firebug addon. It is my favorite console of them all. Does everything I've ever dreamed of needing, and a few more features.
• Chrome - Built-in console, inspect element on the page to see the breakdown of the DOM live.
• Opera - Built-in console
• Safari - Add Firebug Lite to the page, and you'll have a JS driven version of Firebug. Safari has built-in dev tools similar to Chrome, however they need to be enabled.

For all browsers, you can add Firebug Lite, but I really only use it for IE and Safari.

Answer 3

Most modern browsers include a console, which can help with displaying syntax errors and the like. Of course, there's Firebug.