What’s New in Chrome DevTools
summary
Chrome DevTools adds practical, testable features: film strip screenshots in Network and a new custom network throttling dropdown (presets plus user profiles — e.g. 100 kb/s/500 ms), request blocking to simulate lazy loading (DOMContentLoaded drops to ~3.27s; first meaningful paint can fall from ~9.5s to ~5s), an animation inspector with timeline and cubic‑bezier editor, a layers paint profiler, aggregated domain cost attribution for third‑party scripts, inline variable display, blackboxing libraries, and a promises inspector for async debugging.
AI-written summary · about
chapters (42)
- 0:00Intro
- 0:20Back to the 90s
- 0:38Evolution
- 1:11Megazord
- 1:34Console Tab
- 2:40Syntax Highlight
- 3:31Trust
- 3:51Performance
- 4:35Rail
- 5:14Idle
- 6:12Network
- 6:23Network Timeline
- 7:29Network Throttling
- 7:48Network Panel
- 9:12Custom Profiles
- 11:29Chasing WiFi
- 11:48Block Requests
- 12:06Block Requests Example
- 14:04Case Study
- 20:12Blocking Requests
- 20:22Timeline
- 22:21Filmstrip View
- 23:33SFGate
- 25:31Hacker News
- 27:54Paint Probe
- 30:57Animation Control
- 32:21Bezier Curve Editor
- 33:30Animating Views
- 34:21DOM Styles
- 34:35Color Palette
- 35:31CSS
- 35:43DOM Selectors
- 36:23Input
- 37:31HTML Everywhere
- 38:24JavaScript
- 39:52Timestamp
- 41:16Proactive Compilation
- 44:02ES6 2015
- 44:21Promises Flow
- 46:42Whats Next
- 47:11Accessibility Panel
- 47:24Totally Tooling Tips
related talks
11mWhat's new in DevTools
23mWhat’s new in DevTools
13mNew Chrome Dev Tool Functions that will blow your mind
25mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!
40mWhy Debugging Web Performance with Chrome DevTools Is Easier Than You Think!
30mThe Chrome DevTools Performance Panel
28mGetting down to brass tacks: Using chrome dev tools to level up your applications
31mDetecting Web Performance Problems with Chrome DevTools