Essential JS debugging tools for the modern detective
summary
Argues that console.log is useful but insufficient and shows concrete alternatives: Chrome DevTools tricks (console.table, console.trace, DOM $ selectors, log points, snippets, live expressions), breakpoints including conditional and DOM/XHR, black boxing, local overrides and workspaces, resource override and Charles proxy for proxying production, Node debugging with --inspect, VS Code + Debugger for Chrome integrated flow, source maps in production, flame charts and Lighthouse for perf and accessibility. Cites polls ~56% and ~67% using console.log, demos an insulin dosage app change that persists and works.
AI-written summary · about
chapters (10)
- 0:00Introduction and background
- 3:12Why debugging matters
- 7:25Console tools deep dive
- 10:56Chrome DevTools debugger
- 16:38Overriding and proxying files
- 18:23Source maps for debugging
- 20:30Performance and accessibility
- 22:38Debugging Node.js
- 23:18Editor integrated debugging
- 26:34Closing and resources
related talks
29mEssential JavaScript 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!
42mDebugging & DevTools
49mEffective Browser JavaScript Debugging
05mDebugging, a step away from the console
50mChrome Developer Tools Deep Dive