Explore advanced Network panel techniques, including how to find performance bottlenecks, debug popups, configure network conditions, use shortcuts to determine network request initiators and more.
Chapters:
0:00 Intro
0:22 Identify potential performance bottlenecks
2:06 Color-code the colors of resource types in waterfall
2:18 Hide the Overview section
2:35 Enable screenshots in timeline
2:39 Group network requests by frame
2:48 Enable big request rows
2:57 Auto-open for pop ups
3:31 Configure network conditions – user agents, content encoding
3:56 Disable cache
4:13 Identify a network request’s initiator and dependencies
Resources:
Inspect network activity 101 → https://goo.gle/devtools-network
Override and mock network responses → https://goo.gle/devtools-override
Inspect, clear and disable caches → https://goo.gle/devtools-cache
Network reference → https://goo.gle/devtools-network-reference
Questions? Tweet to us:
Jecelyn Yeen → https://goo.gle/jecfish
Chrome DevTools → https://goo.gle/chromedevtools
Watch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs
#DevToolTips #ChromeForDevelopers #Chrome
Speaker: Jecelyn Yeen
Products Mentioned: Chrome, Chrome DevTools