Test UI changes and production fixes with the powerful network response overrides in Chrome DevTools. Mock response headers, files, API requests, and more with ease!
Chapters:
0:00 – Intro
0:40 – Mock API to test production fixes
1:30 – Setup overrides folder
1:41 – Prototype new UI design
2:13 – Sync and edit overridden files anywhere
2:30 – Testing performance fixes – CLS
3:20 – Overrides doesn’t work in Elements panel
3:40 – Tip: Search panel
4:33 – Redirect overrides dialog
4:54 – Override JavaScript, CSS or other files
5:06 – Override HTTP response headers
6:22 – Auto disable cache when there are overrides
6:40 – Filter overridden response
Resources:
Override web content and HTTP response headers locally → http://goo.gle/devtools-overrides
Cumulative Layout Shift (CLS) → https://goo.gle/3Jrjbim
3 insightful community blog posts:
Optimize Page Speed with Overrides → https://goo.gle/448cZWa
Run Core Web Vitals Experiments with Overrides → https://goo.gle/3U1AGdS
Making images lazy-load with Overrides → https://goo.gle/44a3fKY
Watch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs
Questions? Tweet to us:
Jecelyn Yeen → https://goo.gle/jecfish
Chrome DevTools → https://goo.gle/chromedevtools
#ChromeForDevelopers #Chrome
Speaker: Jecelyn Yeen
Products Mentioned: Chrome – General