*blog... kind of... *rss 



How do you debug JavaScript?
Joe Parry suggested by email to write a follow up to the post about JavaScript IDEs. That's also one of the common questions and I intended to include it on the first post but I forgot :S

I've heard many people referring to Firebug as the best way to debug when coding JavaScript but I've never got to try it out properly as I started coding directly with/for Chrome. So in my case I mainly use the Webkit Inspector/Developer Tools panel.

However, rather than debug the code I usually log stuff instead for which console.log(), console.log(), console.error(), console.warn(), console.info() gives me way more than I need. Specially coming from Flash where the console is so basic that everyone keeps building their own logging library.

At this last Google I/O I saw this presentation about the Developer Tools that left me quite impressed of how much stuff I was missing.

15 comments

I write most of my JavaScript in TextMate, and awhile back I found a bundle someone wrote that integrates JSLint with TextMate. So, every time I save, it alerts me to any syntax errors. It's a big help in avoiding the simple syntax errors that can drive you crazy sometimes!
The debugger is impressive in Chrome, you can even take that step further since a debugger API exists within Chrome. For example, if your familiar with Eclipse IDE, you will know how easy it is to debug your application. Since Google Chrome has a debug API, a couple of Googlers did an Eclipse JavaScript debugger to debug your JavaScript web app. You can find more information here: http://blog.chromium.org/2009/08/google-chrome-developer-tools-for.html
I agree with Chad, the JSLint Bundle for Textmate is very useful. Kind of OT but my technique is to write Tests before I even start to write my JavaScript using the Jasmine test suite. The tests fail at first, then you write the code to pass each test. In my case this BDD way of developing has had the effect of making my code smaller with less unnecessary code.
Thanks for the posting! And the tips. I'm also very interested in debugging javascript 'headlessly' - i.e., running outside of the browser. I've tried to get a debugging environment via Eclipse and Rhino but I can't seem to get it working. Maybe I'll have more luck with V8.

Does anyone have experience of this? How do people debug their node.js server-side stuff?
The times I've done some node.js stuff was practically blindly. If I remember correctly node.js would throw an error and stop if something went wrong anyway.
The Webkit inspector is awesome! It crushes firebug like a bug.
vim + chrome dev tools ftw
I am using Apanta as Javascript IDE. It have a nice intergraded debugger for Javascript. Just like you debug in FlashBuilder. You can step though the code, set breakpoint, explore the var...etc. I love to use it.
Blend of Webkit and Firebug for when Webkit annoys me. Usually from stale (and no longer existent) debugging code executing at surprising times, and my breakpoints multiplying whenever I open a new browser. Aside from those bugs though, it's quite slick.

For either, try inserting "debugger;" into your code if you like starting from your code. That'll pause execution and launch the debugger in either browser, where you can inspect variables / run code to your heart's content :)
I too use Apanta as Javascript IDE. But the intergraded debugger for Javascript is still lacking its efficiency and resources compared to debugger of FlashBuilder. But still i prefer using apanta as i dont have any options

Emacs for development (Steve Yegges JS2 mode for javascript acts as static analysis tool within emacs so produces live warnings not just about syntax errors but also some semantic errors - eg functions that have some exits that return a value and some that don't), with jslint running within emacs, and Chrome's debugger for debugging has almost completely replaced Firebug for me. I keep on meaning to learn how to use SpeedTracer too, but haven't really got round to it yet...

Emacs has a history of wrapping command line debuggers (so for example the perl debugger is command line only, but you run it within emacs and emacs will read the prompts and display the appropriate source code as you go, ditto with C++ debuggers) so I'd bet that emacs as a debugger for node.js etc (maybe adapting it to http://nodedebugger.com/ or similar) is not too far away.

PS Hi Joe !
I lately started using Komodo Edit. Has quite good set of features and usability is good as well. Also has a plugin for Venkman.
IMO also worth mentioning is the console.trace, which gives you a nice call stack, which can be really useful in some scenarios
mdry: Interesting, wasn't aware of that one. Thanks!
Back in the day, I created my own Flash debugger (remote logger http://tech4computer.wordpress.com/2009/11/12/flash-debugger/ ) in Java to debug flash running on Windows Pocket PC. Before that had edited Shell scripts to to debug C programs. I used Firebug briefly but found that console.log or earlier (firebug)console.log was sufficient. Now I mainly use Chrome Developer Tools for debugging JS/html/CSS. Using Notepad++ for editing. NetBeans and Aptana are good but they are slow.

I'm guessing that Google is going to make the Developer Tools into a full fledged IDE.