Debugging, Profiling, & Rocking Out with Browser-Based Developer Tools!
summary
Chrome developer tools demos show concrete fixes and concrete costs: live profiling finds 30 seconds to interactive on a site, groups heavy third‑party work by product and subdomain with group by subdomain, and exposes that moat and other ad tech add several seconds. Network inspection reveals 1,300 requests / 8 MB and long initiator chains. Elements tricks include H hides an element and shift/alt nudges, sources supports breakpoints/debugger statements and pretty‑print, audits trace time metrics, and rendering tools flag low FPS below 30.
AI-written summary · about
chapters (14)
- 0:00Intro
- 2:43Elements
- 7:12Thirdparty scripts
- 13:34Herschel Comm
- 14:04Debugging
- 15:14Console
- 15:54Watch
- 17:24Pause
- 18:04Local Copy
- 18:34Debugger
- 19:19Sources Tab
- 20:24Mobile Emulation
- 20:49Device Toolbar
- 21:29Console Drawer
related talks
47mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!
50mRocking Out with Browser-Based Developer tools
27mChrome Developer Tools
28mGetting down to brass tacks: Using chrome dev tools to level up your applications
40mWhy Debugging Web Performance with Chrome DevTools Is Easier Than You Think!
49mEffective Browser JavaScript Debugging
35mOptimise your Web Development Workflow
54mRemoving the gag from your browser