Useful Chrome DevTools debugging techniques

First of all, you can open debugging tools window with several hotkeys. I use F12 to open developer tools window and Ctrl+Shift+J to open developer tools with console tab have activated.

Advanced techniques I didn't knew before was:

On the elements tab you can see current DOM state of the current page. You can expand and collapse elements of DOM manually or use Select element in the page tool (use Ctrl+Shift+C hotkey) to inspect them:

You can set breakpoint on DOM changes: attributes or subtree modifications. If some JavaScript changes the node's attributes like class or href, devtools will trigger a breakpoint.

If you have reference to DOM element in JavaScript (jQuery reference, for example) and you want to navigate to exact location of the element in DOM tree, you can use Reveal in Elements panel by right-clicking the value with reference.

When you debug your JavaScript code, you can evaluate variables with hover mouse on them. Also you can select arbitrary part of expression and hover on it to evaluate just selected expression:

If your JavaScript uses Promises, you can get valid stacktraces for asynchronous actions. To get that just check Async checkbox: