Add breakpoint by clicking on the line number:
Run the code in the browser, when the debugger stops, you can use the usual things to debug your code including:
- Step into function – F11
- Step over – F10
- Step out of function call – Shift + F11
- Watch variables
- Inspect local variables
Additional useful features
I’ve recently learned some very handy features to use while debugging.
Adding debugger; command to the code the debugger stops executing the code, it is a very quick way to add a breakpoint, no need to browse the source files in the devtools.
Similar to the console.log, but it shows the variable as a table, useful to quickly check values of complex variables.
If you need to inspect/debug minified code (especially in production) devtools can pretty print the minified code by clicking on the curly braces in the bottom left corner of the main debugger window:
The pretty printed output is not as clean and useful than the original source code, but it is more understandable/debuggable than the minified version, it looks like this: