Effective Browser JavaScript Debugging
summary
Chrome DevTools are used as a live IDE: source maps map minified bundles back to original ES2015 files so breakpoints, watch expressions and stepping hit real code; the Performance/Timeline and flame charts highlight blocking JavaScript and show CPU throttling. Replacing per-iteration DOM appends with a document fragment cuts a 390ms blocking append to ~57ms for 1,000 items. Deferring work with setTimeout reduces blocking, while requestAnimationFrame yields smooth 60 FPS by batching renders at the browser’s paint cadence; XHR breakpoints and workspace file mapping let you edit and hot-test fixes.
AI-written summary · about
chapters (23)
- 0:00Intro
- 1:09About Vance Lucas
- 3:11Browser is your IDE
- 6:55Element Inspector
- 9:02Source Window
- 12:25Time Line Graph
- 13:56Memory Profile
- 14:26Demo
- 15:07Blocking JavaScript
- 15:36Whats Blocking
- 17:25Transpiling
- 18:22Source Maps
- 22:28watch expression
- 24:25performance measurement
- 25:45penloop example
- 26:39flame graph
- 29:43parse HTML
- 30:58vanilla JS
- 32:06layoutcalculation
- 32:43CPU throttling
- 33:39Set timeout
- 36:00Call graph
- 38:07Appending DOM nodes
related talks
35mOptimise your Web Development Workflow
25mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!
29mHands on performance debugging with the browser in devtools
43mModern web debugging with devtools
40mWhy Debugging Web Performance with Chrome DevTools Is Easier Than You Think!
33mEssential JavaScript debugging tools for the modern detective
29mEssential JavaScript debugging tools for the modern detective
20mJavaScript Authoring Tooling