Override and mock network responses #DevToolsTips

Опубликовано 25 апреля 2024, 17:00

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 → goo.gle/devtools-overrides
Cumulative Layout Shift (CLS) → goo.gle/3Jrjbim

3 insightful community blog posts:
Optimize Page Speed with Overrides → goo.gle/448cZWa
Run Core Web Vitals Experiments with Overrides → goo.gle/3U1AGdS
Making images lazy-load with Overrides → goo.gle/44a3fKY
Watch more DevTools Tips → goo.gle/DevToolsTips
Subscribe to Chrome for Developers → goo.gle/ChromeDevs

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

#ChromeForDevelopers #Chrome

Speaker: Jecelyn Yeen
Products Mentioned: Chrome - General