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:
Inspect element tool
  • 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.
Break on attributes change
  • 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.
Reveal in Elements panel
  • 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:
Evaluate selected expressions on mouse hover
  • If your JavaScript uses Promises, you can get valid stacktraces for asynchronous actions. To get that just check Async checkbox:
Async Checkbox

Happy frontend debugging!

And which debugging techniques do you use?

Comments