Getting down to brass tacks: Using chrome dev tools to level up your applications
summary
Chrome DevTools tips that actually change outcomes: use the performance panel to record flame charts and see an 83 ms click handler causing dropped frames, use user timings (performance.mark/measure) to label costly functions, and catch leaks with memory snapshot comparison—the demo finds 2,300 extra event listeners. Try Flex debugging to center a div, console.table/console.trace for call sites, the real‑time monitor and CSS overview, and an audio worklet + canvas demo that runs at 60 FPS.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 1:25Why Chrome DevTools stands out
- 3:33Flexbox debugging
- 5:18Real-time data debugging
- 6:40Performance panel
- 15:45User timings
- 17:34Console trace
- 19:17Memory leak debugging
- 22:48Performance monitoring
- 24:13Accessibility tools
- 25:15Audio demo
related talks
30mThe Chrome DevTools Performance Panel
25mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!
47mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!
35mOptimise your Web Development Workflow
50mRocking Out with Browser-Based Developer tools
31mDetecting Web Performance Problems with Chrome DevTools
30mPerformance Tuning Secrets
28mDevTools & The Performance Tab