DevTools: The developer's Swiss Army knife
summary
Overview of browser DevTools panels, settings, and lesser-known features (the "Swiss Army knife" of developers) demonstrating tools to increase debugging efficiency, reduce the pain of troubleshooting, and improve web performance. Practical coverage focuses on concrete DevTools capabilities that attendees may not have seen or tried before.
AI-written summary · about
chapters (15)
- 0:00DevTools intro
- 2:09Command panel basics
- 3:14Console DOM refs
- 4:36Live console expressions
- 5:39Copy CSS styles
- 6:23Performance tools
- 8:48Timeline and network requests
- 10:34Main thread JS debugging
- 12:40User action recording
- 14:23Performance automation
- 16:29Design Mode edits
- 17:54Core Web Vitals tracking
- 18:37Debugging JS timers
- 20:03Copy console data
- 21:07Q&A
related talks
38mLesser-known Chrome DevTools Features
52mDeveloper Tools That Shouldn't Be Secrets
01h 13mAll You Need Is DevTools
29mMastering your browsers' Dev Tools
43mModern web debugging with devtools
31mDetecting Web Performance Problems with Chrome DevTools
32mChrome Dev Tools. New & Tips
55mDebugger: Debugging Code