Essential JavaScript debugging tools for the modern detective
summary
Demonstrates concrete debugger moves: replace scattershot console.log (the talk cites ~56–67% habitual use) with targeted tools like console.table, styling logs, conditional breakpoints and blackboxing in Chrome DevTools, live expressions, snippets and the local overrides flow to persist quick fixes on production. Shows workspaces and proxying (resource override / Charles) to edit live apps, explains source maps for readable stack traces, and configures VS Code’s debugger for Chrome plus compound launches to step through front end and Node back end together.
AI-written summary · about
chapters (21)
- 0:00Essential JavaScript debugging tools for the modern detective
- 2:10THE PSYCHOLOGY
- 2:58reproduce
- 5:15elimination
- 6:04embrace the bug
- 7:18THE CONSOLE
- 8:14console.log() with context
- 11:26THE DEV TOOLS
- 12:24blackboxing
- 13:24breakpoints
- 14:28logpoints
- 14:42snippets
- 15:24live expressions
- 18:28proxy overrides
- 20:38source-map config Development
- 21:26source-map deployment
- 22:11performance
- 23:44accessibility
- 25:09dev tools for node
- 26:54console.log on the client
- 31:56THE CONCLUSIONS
related talks
29mEssential JavaScript debugging tools for the modern detective
28mEssential JS debugging tools for the modern detective
53mBeyond console.log
47mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!
05mDebugging, a step away from the console
50mChrome Developer Tools Deep Dive
23mDebug Like a Detective
42mDebugging & DevTools