Advanced Network Analysis with Chrome DevTools #DevToolsTips

Опубликовано 27 февраля 2025, 17:01

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 → goo.gle/devtools-network
Override and mock network responses → goo.gle/devtools-override
Inspect, clear and disable caches → goo.gle/devtools-cache
Network reference → goo.gle/devtools-network-refer...

Questions? Tweet to us:
Jecelyn Yeen → goo.gle/jecfish
Chrome DevTools → goo.gle/chromedevtools

Watch more DevTools Tips → goo.gle/DevToolsTips
Subscribe to Chrome for Developers → goo.gle/ChromeDevs


#DevToolTips #ChromeForDevelopers #Chrome


Speaker: Jecelyn Yeen
Products Mentioned: Chrome, Chrome DevTools