Essential JavaScript debugging tools for the modern detective
summary
Favors concrete fixes over platitudes: a poll shows about 56%/ 67% still reach for console.log, but swapping in console methods like console.table, group, trace and dir drastically reduces noise. Demonstrations include hitting breakpoints in Chrome devtools, blackboxing libs, live expressions, local overrides and workspaces that persist edits to a Heroku insulin‑dosage demo app, proxying with Charles proxy or a resource‑override extension, shipping source maps to an S3 VPN bucket, Node debugging with --inspect and VS Code + Debugger for Chrome.
AI-written summary · about
chapters (24)
- 0:00Intro
- 1:43a skill to be mastered
- 2:54reproduce in a test
- 4:10console.log() with context
- 4:49console.logwith colors
- 5:25console.group
- 5:48$_and
- 9:06stepping
- 9:35line of code in dev tools
- 10:38breakpoint types
- 11:04breakpoints
- 12:08pause on exceptions
- 12:26disabling
- 12:50blackboxing
- 13:49logpoints
- 14:03snippets
- 14:38live expressions
- 18:01proxy overrides
- 20:07source-map config
- 20:57source-map deployment
- 21:50format
- 22:02performance
- 24:32dev tools for node
- 25:53console.log on the client
related talks
28mEssential JS debugging tools for the modern detective
33mEssential JavaScript debugging tools for the modern detective
53mBeyond console.log
47mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!
23mDebug Like a Detective
42mDebugging & DevTools
50mChrome Developer Tools Deep Dive
05mDebugging, a step away from the console