Override and mock network responses

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

Watch more DevTools Tips → https://goo.gle/DevToolsTips

#ChromeForDevelopers #Chrome

Speaker: Jecelyn Yeen
Products Mentioned: Chrome - General