Rocking Out with Browser-Based Developer tools
summary
Live demos use Chrome DevTools (Elements, Network, Timeline, Layers, Console, Debugger) and show concrete fixes: find 200 requests with only 54 from site domain, spot a 2.4 MB PNG that should be a ~700 KB JPEG, see first paint at 2.12s, and drop janky scrolling from ~16 FPS to ~40 FPS by avoiding repaints. Steps include using paint flashing, break on attribute modifications, promoting animated elements to their own layers (backface-visibility / will-change), network/CPU throttling and remote device emulation.
AI-written summary · about
chapters (29)
- 0:00Start
- 1:10Firebug
- 2:25Developer Tools
- 2:47Chrome Developer Tools
- 11:01Network Tab
- 11:53Copy and Paste
- 12:26The Network Tab
- 15:25Sort by Size
- 15:56Preserve Log
- 17:14Cpu Throttling
- 18:31Console Tab
- 20:11Move Layers
- 20:31Add Layers
- 21:20Developer Tools Experiments
- 22:43How a Browser Works
- 23:16Render Tree
- 27:22Paint Flashing
- 30:01Layer Border
- 31:31Network Conditions
- 32:01Rendering Sensors
- 34:07Javascript Debugging
- 35:40Breakpoint
- 37:33Watch Statement
- 38:19Xhr Breakpoint
- 38:33Dom Breakpoint
- 41:08Performance Performance Profiling
- 42:13Flame Chart
- 46:39Limited Mobile Emulation
- 48:03Media Queries
related talks
25mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!
47mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!
28mGetting down to brass tacks: Using chrome dev tools to level up your applications
49mEffortless Performance Debugging
35mOptimise your Web Development Workflow
40mWhy Debugging Web Performance with Chrome DevTools Is Easier Than You Think!
49mEffective Browser JavaScript Debugging
43mWork Smarter, not Harder with Chrome DevTools