Assume that you have a problematic code snippet. What is your way to debug it?
Are you alert the variables?
Do you use Visual Studio .NET or any other tool to debug your javascript snippet?
Are there good script libraries that ease the debugging process, or do you write your own?
I found the new version of IE 8 ( Press F12) is very good to debug JavaScript code.
Of course, FireBug is good if you use FireFox.
I use Firebug. But if I'm working on a web app that isn't compatible with FireFox I just use the debugger statement and debug in VS.NET.
Visual Studio 2008 has some very good Javascript debugging tools. You can drop a breakpoint in your client side JS code and step through it using the exact same tools as you would the server side code. No need to attach to a process or or do anything tricky to enable it.
I use Webkit's developer menu/console (Safari 4). Almost identical to FireBug.
console.log() is the new black--far better than alert().
I use a few tools: Fiddler, Firebug, & Visual Studio. I hear IE8 has a good built-in debug.
Cheers
Start with Firebug, IE Debugger.
Be careful with debuggers in Javascript though. Every once in a while they will affect the environment just enough to cause some of the errors you are trying to debug.
EDIT
One comment requested examples:
For IE it's generally a gradual slowdown, some kind of memory leak type deal. After a half hour or so I need to restart. Seems to be fairly regular.
For Firebug, It's probably been more than a year so it may have been an older version. As a result, I don't remember the specifics, but basically the code was not running correctly and after trying to debug it for a while I disabled firebug and the code worked fine.
I like firebug - it allows you to put breakpoints in your script and then you can step through, you can add watches, it even shows the stack. Awesome thing.
alert() is something which is also quite handy.
cheers
I used to use FireBug, until IE8 came out, I'm not a huge fan of IE, but after spending some time with the built-in developer tools, which includes a really nice debugger, it seems pointless to use anything else. I have to tip my hat to Microsoft they did a fantastic job on this tool.
You might also check out YUI Logger. All you have to do to use it is include a couple of tags in your html. It is a helpful addition to Firebug, which is more or less a must.
My first step is always to validate the html and to check syntax with JSLint. If you have clean markup and valid javascript then it is time for Firebug or another debugger.
As with most answers, it really depends: What are you trying to achieve with your debugging? Basic development, fixing performance issues? For basic development, all the previous answers are more than adequate.
For performance testing specifically, I recommend Firebug. Being able to profile which methods are the most expensive in terms of time has been invaluable for a number of projects I have worked on. As client-side libraries become more and more robust, and more responsibility is placed client-side in general, this type of debugging and profiling will only become more useful.
Firebug Console API: http://getfirebug.com/console.html
Although Alert(msg); works in those "I just want to find out whats going on" scenarios... every developer has encountered that case where you end up in a (very large or endless) loop that you can't break out of.
I'd recommend that during development if you want a very in-your-face debug option, use a debug option that lets you break out. (PS Opera, Safari? and Chrome? all have this available in their native dialogs)
//global flag
_debug = true;
function debug(msg){
if(_debug){
if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
_debug = false;
}
}
}
With the above you can get your self into a large loop of popup debugging, where pressing [Enter]/[Ok] lets you jump through each message, but pressing [Escape]/[Cancel] lets you break out nicely.
Beside using Visual Studio's Javascript debugger, I write my own simple panel that I include to a page. It's simply like Immediate Window of Visual Studio. I can change my variables' values, call my functions, and see variables' values. It simply evaluates the code written in the text field.