Now that I'm working on a larger code base, debugging has become increasingly important and complex. With that said, I decided to dig into some documentation, and explore how I can use tools that already exist more productively. Below are some of the tricks I've come up with so far.

Chrome Dev Tools

Console:

keys(window);

The keys method takes any object and returns its properties. Passing in window, is a great way to check for global variables.

monitorEvents(window, "click");

The monitorEvents method will print the event's object to the console. This one's pretty cool to play around with!

$0;

Lost in a see of divs? This will print only the currently inspected element to the console.

$_;

I used this one in the past, but it had escaped me. The console is definitely not a replacement for a full editor, but with $_ you can easily retrieve the result of your previous command.

Speaking of an editor replacement, Shift + Enter acts as a return, allowing you to play around with methods, or anything else you'd need multiple lines for.

Object.defineProperty(object, property, descriptor);

Descriptor is just an object. And, by defining a getter and setter that wrap debugger on that object, you can pause and inspect the state of your application whenever the property you've passed is read or written to.

Object.observe(object, function(){});

The observe method is pretty cool by itself, and using it for debugging is really useful. Use it to see whenever a new property is added to the passed in object.

Sources:

Need to find something specific in the sea of files? Cmd + Shift + P will open up a search box.

How about when you're trying to debug a minified file? Clicking the curly bracket icon in the bottom left of the file window will pretty print it for you. I was excited about this one!

Finally, the filter input is handy for filtering files by extensions.

Node

Debugger:

To start up the node debugger, you prefix your file name with debug. Then, navigate with the following commands once you've landed on your debugger statement;

• c - continue
• n - next
• s - step in
• 0 - step out
• pause - pause

Console Object:

(Although these are helpful with Node, they can be used in the browser as well)

console.dir();

Passing an object to the dir method with output the object as json instead of the typical string.

console.trace();

Unsure how your method is call is being initialized? The trace method is the right tool for the job.

Angular

Maybe you were wondering about the json filter. The creators of Angular actually said that this is a technique they've used.

Much nicer on the eyes.

Batarang:

I haven't played around with Batarang in depth, but just by adding the extension, you enter things like;

$scope;

in the console, and see everything on that scope object.