Debugging, a step away from the console

on YouTube ↗05m

" summary

Chrome DevTools Sources panel gets used to replace scattershot console.log calls with real inspection: a debugger statement pauses execution and shows scope values (example reveals "2" as a string not a number), clicking a line number sets a manual breakpoint, conditional breakpoints pause when myAttempts == 4, the call stack lets you jump to callers, the console evaluates live expressions, and the pause on exceptions stop‑sign pauses exactly where an error throws.

AI-written summary · about

" chapters (7)

1. 0:00Start
2. 0:32console.log?
3. 1:14Debugging?
4. 1:33Breakpoints How to pause your code to debug
5. 1:43Insert "debugger;" statement
6. 2:44Manual Breakpoints
7. 3:53Uncaught Exceptions

" related talks

• 33mEssential JavaScript debugging tools for the modern detectiveRebecca Hill · You Gotta Love Frontend 2019
• 29mEssential JavaScript debugging tools for the modern detectiveRebecca Hill · JSConf Budapest 2019
• 42mDebugging & DevToolsJecelyn Yeen · jsday 2023
• 28mEssential JS debugging tools for the modern detectiveRebecca Hill · localhost conference 2019
• 47mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!Mike Herchel · Frontend United 2018
• 50mChrome Developer Tools Deep DiveShay Friedman · Jfokus 2016
• 28mModern Web DebuggingJecelyn Yeen · JSNation 2023
• 43mModern web debugging with devtoolsJecelyn Yeen · BrazilJS Conf 2024