To use this Website we are using Cookies and collecting some Data. To be compliant with the EU GDPR we give you to choose if you allow us to use certain Cookies and to collect some Data.
Daniel Verner -
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: