Override and mock network responses #DevToolsTips

Channel:
Chrome for Developers
Subscribers:
741,000
Published on ● Video Link: https://www.youtube.com/watch?v=KxjGYcHZ_uI


Duration: 7:49
13,043 views
1,002

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



Other Videos By Chrome for Developers


2 days agoAnimate elements in different directions | Unleash the power of Scroll-Driven Animations (7/10)
2 days agoAdd Scroll Shadows to a Scroll Container | Unleash the power of Scroll-Driven Animations (6/10)
2 days agoCore Concepts: Timeline Lookup and Named TLs | Unleash the power of Scroll-Driven Animations (5/10)
2 days agoCore Concepts: Timeline Ranges Demystified | Unleash the power of Scroll-Driven Animations (4/10)
2 days agoCore Concepts: view() and ViewTimeline | Unleash the power of Scroll-Driven Animations (3/10)
2 days agoCore Concepts: scroll() and ScrollTimeline | Unleash the power of Scroll-Driven Animations (2/10)
2 days agoIntroduction | Unleash the power of Scroll-Driven Animations (1/10)
5 days agoWebsocket Stream API
2024-04-26Optimizing INP: A deep dive
2024-04-25From asm.js to Wasm with Emscripten creator Alon Zakai
2024-04-25Override and mock network responses #DevToolsTips
2024-04-24The Looper Mini Web Machine
2024-04-23setHTMLUnsafe and parseHTMLunsafe
2024-04-19Learn Scroll-Driven Animations with this free video course
2024-04-18The Looper Mini Web Machine
2024-04-16New in Chrome 124: setHTMLUnsafe, streams in WebSockets, and more
2024-04-10Deep dive into the Privacy Sandbox APIs for Publishers
2024-04-09How should publishers prepare for the Privacy Sandbox?
2024-04-02Service Worker Routing API
2024-03-28How to find an INP issue with Chrome DevTools
2024-03-27What is Interaction to Next Paint (INP)?


Tags:
Chrome
Developers
Google
Web
pr_pr: Chrome;
type:DevByte video ;
gds:Yes;
Chrome DevTools
Override and mock network responses
api requests
Cumulative Layout Shift
cls