Develop Reference

How to debug Javascript code or functions?

I have some Javascript code.
I want to trace errors and debug it.
how to do it ?

It used to be that debugging in javascript was quite limited. You could post alerts to indicate variable states or print information to the web page. In the case of syntax error, it would simply not execute all the code (meaning you had to place alerts prior to the error to know where it was).
Thankfully, browsers have caught up. Firebug is very useful as well as Chrome's developer tools which both use breakpoints, expression evaluation, as well as a series of other useful tools for debugging in-browser. I would suggest you look into these. I believe also internet explorer has a developer tools section, but I've found that it isn't to my liking, however you're free to use whatever you need/require.

It depends on the browser:
Firefox: Download the Firebug Extension
Opera: User the built-in Opera Dragonfly
Webkit-based (Chrome, Safari, Rockmelt...): Press F12 to open the built-in Webkit debugger
Internet Explorer 9+: Press F12 to open the built-in Developer Tools
IE <=8: Install DebugBar
Most of these tools are accessible via these keyboard shortcuts:
CTRL+SHIFT+I
F12
Look for the "Console" Tab. There the browser prints various errors like JavaScript errors, resource not loaded errors etc. To manually write to the console, most browsers offer the console object which hosts functions for the console. Most commonly used is console.log('text').

Google Chrome
F12 -> console.
in code use: console.log(variables);

Is there a JavaScript IDE that allows debugging in all three browsers (IE, FF, Chrome)?

I know WebStorm allows debugging in FF and Chrome, but I don't see IE support. Is there an IDE out there that can handle all 3?

No, I don't think anyone's covered all 3 browsers.
Visual Studio can debug IE. It cannot debug FireFox or Chrome.
WebStorm can debug FireFox and Chrome (by installing extensions).
All browsers have their own debugging tools, too. So you've got lots of options, but no silver bullet.

Tool Roundup for Debugging JavaScript

What techniques (other than alert(message);) do you use to debug JavaScript/jQuery? Give particular attention to browser specific techniques.
Tools
console.log(message) - alternative to alert(message); (Nirmal)
browser-safe call (soslo)
jsFiddle - demonstrations (Craver)
BlackBird - writing messages to the screen (Oli)
FireFox
FireBug (Lite)
Venkman's JS Debugger Add-in (Zeus)
Chrome
Built-in development tools (tutorial)
Firebug Lite (extension)
Safari
Built-in tools (overview - jsummers) (more information)
Opera
Dragonfly
Internet Explorer (I had to put it last)
Developer Toolbar
Firebug Lite
Adobe BrowserLab (Mickel)
IETester (Mickel)
MS Expression Web SuperPreview (Rijpstra)

console is your friend, available by default in newer browsers, and you can add a whole lot of debugging to IE with FireBug Lite.
For other browsers:
Chrome has developer tools
Firefox has the excellent Firebug addon
For demonstration/test cases, jsFiddle is also an excellent tool.

If you're concerned about using console.log because not all browsers support this, it's easy to workaround with a couple lines of javascript:
console = console || {};
console.log = console.log || function(){}; //you can change this to do whatever you want, or leave it to just keep js errors from being thrown

I love Blackbird. It's a cross-browser JS logging framework, with support for debug/info/warning/error.
You can display the console at any time with the F2 func key.
http://www.gscottolson.com/blackbirdjs/

If you are looking for an alternative for alert(message);, it is console.log(message);
The requirement is that you need any modern browser or a browser with developer tools installed.

More in testing than debugging domain.
Selenium - for GUI tests
JSUnit - for unit testing

The Chrome Developer Tools are a direct descendant of the Safari (WebKit) Developer Tools.

Refer to question for roundup of all answers.

HTML/JS Debugger

We are searching for an HTML/JS debugger specifically suited for IE that can handle popup windows as well. We tested Firebug Lite which is good but it has its restrictions when compared to Firebug. We also tried IE Companion but there are some problems when it comes to in-place editing and popups.
Do you recommend a good debugger?

Internet Explorer Developer Toolbar. It is best for IE as of i know so far :)
alt text http://upload.wikimedia.org/wikipedia/en/d/d1/Devtoolbar.PNG

IE8 has one built in, it can run as IE7 also. Hit f12

Is this what you are looking for? It's called the Internet Explorer Developer Toolbar, it's like FireBug... but it's not that good :D

If (like me) you can make do with logging as a debugging tool, log4javascript works well.

Debugging JavaScript in Internet Explorer and Safari

Currently, I don't really have a good method of debugging JavaScript in Internet Explorer and Safari. In Firefox, you can use Firebug's logging feature and command Line functions. However, this doesn't help me when I move to other browsers.

For Safari you need to enable the "Develop" menu via Preferences (in Safari 3.1; see the entry in Apple's Safari development FAQ) or via
$ defaults write com.apple.Safari IncludeDebugMenu 1
at the terminal in Mac OS X. Then from the Develop menu choose Show Web Inspector and click on the Console link. Your script can write to the console using window.console.log.
For Internet Explorer, Visual Studio is really the best script debugger but the Microsoft Script Debugger is okay if you don't have Visual Studio. This post on the IE team blog walks you through installing it and connecting to Internet Explorer.
Internet Explorer 8 looks like it will have a very fancy script debugger, so if you're feeling really adventurous you could install the Internet Explorer 8 beta and give that a whirl.

This is the Firebug Lite that #John was referring to that works on IE, Safari and Opera.

A post on the IE Blog, Scripting Debugging in Internet Explorer, explains different options for script debugging in Internet Explorer.
Here is the Apple Developer FAQ on debugging JavaScript in Safari.

Safari 3.0 and 3.1 include the Drosera JavaScript debugger, which you can enable on the Mac by following the instructions at that link. There's also the Safari Web Inspector..

Visual Studio 2005 has the Script Explorer (under the Debug > Windows menu). It shows a tree of all the scripted stuff that's currently debuggable. Previously I was breaking into the debugger via IE's View > Script Debugger menu, but I'm finding the Script Explorer is a quicker way to get to what I want.

The best method I've used for debugging JavaScript in Internet Explorer is through the Microsoft Script Editor. The debugger is full featured and very easy to use.
The article bellow teaches how to install the Microsoft Script Editor and configure it.
HOW-TO: Debug JavaScript in Internet Explorer
for Safari, sorry no answer...

Safari 3.1 doesn't need any magical commandline preferences -- the Advanced tab of the preferences window has an enable develop menu checkbox. That said if you can use the webkit nightlies (http://nightly.webkit.org), you're probably better off doing that as the developer tools are vastly improved, and you can more easily file bug reports requesting features that you want :D

See the Debugging chapter of the Safari User Guide for Web Developers for full documentation of how to debug in Safari. (For the most part it is the same API as Firebug.)
In IE you can use the IE Dev Tools, but I prefer Firebug Lite as others have mentioned.

There is now a Firebug Lite that works on other browsers such as Internet Explorer, Safari and Opera built. It does have a limited set of commands and is not as fully featured as the version in Firefox.
If you are using ASP.NET in Visual Studio 2008 will also debug JavaScript in Internet Explorer.