Add a 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
Inspect local variables
Additional useful features
I’ve recently learned some very handy features to use while debugging.
Adding a 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 dev tools.
Similar to the console.log, but it shows the variable as a table, useful to quickly check the 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: