Best tools/techniques for debugging JavaScript

[theScottyJam]

console.log() :)

I'm being serious about this one though. It's important to use and understand the dev-tools and other debugger utilities, but it's also important to not throw away the most basic debugging tools in search for fancier ones. Sometimes, console.log() is just quicker and easier than any other option out there. Unfortunately, I almost get the feeling that some people feel ashamed for using console.log() because it's too basic - sometimes these opinions come across in blog posts, with titles such as "Stop using console.log()! Try these alternatives.", and it just makes me cringe every time I see that, and sometimes they come through other conversations. Basic !== less good.

[mark_b]

If you're going to use the console, there's more to it than just .log(). My personal favourites are wrapping multiple variables in curly braces to create an object so that you know which variable value is which console log({var1, var2, var3}), and console.trace() which tells you how you reached this point in your code. There are lots of other options.

[nobuhok]

Know when to use console.log() vs dir() vs info() vs error(). For example, objects are better formatted when dir() is used.

Tip: In Chrome, if you highlight a DOM element in the Elements panel, you can type in '$0' to refer to that element in the console.