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 → 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

[@naveensyoutube1839]

Very helpful feature when the backend apis are unstable 😊

[@yuhanasyulianto3683]

Finally, very useful features solving day to day real problems

[@JonatanPetersson]

Exactly what I've wanted for a long time! Amazing news!

[@Spreadshotstudios]

This is nice when you dont want to go into Postman or Hoppscotch to create/mock a test/edit api response. I can do it inline 🤠

[@kaialexanderbustos224]

Sick features, excited to try em out

[@theuniscoetzee6840]

brilliant! Love learning from you guys.

[@arvinddhakar739]

Very helpful feature, thanks.

[@claushellsing]

finally I can said goodbye to Fiddler Proxy

[@zev108]

wow thats the best one yet!

[@ix3238]

amazing!! Thank you so much

[@viktordavidovich]

Cool stuff! Thanks!

[@twocsies]

Don't forget to remove the changes when done. It can be tricky to figure out what's going on because there is no special highlighting for local files; they just look like like every other file.

[@keffbarn]

This was actually quite a funny and good video 🍻

[@davi_singh]

This is awesome, I often find myself mocking APIs and it was always annoying this would really help me out. On other news, I am the only one who caught they are using a Vue app :D... Super happy to see Vue getting more traction

[@hngbv951]

You made my life easier!

[@sealone777]

Amazing!

[@gleidsonbritosantana8262]

I heard a "Tchau!"?
Great content and features.

[@ciberman]

This is huge! Amazing work! Is it possible to override the status code of the response?

[@licokr]

amazing ❤ I haven't utilize already existing features yet tho

[@brentmitch4998]

If I could give this video two thumbs up I would. Thanks!

[@genyklemberg]

Fire 🔥

[@greatnile]

can I control/overwrite response status code?

[@paevents8064]

Omg. Its a great feature

[@denischudinov2379]

🔥🔥🔥

[@phamhoa5590]

sometime i can not edit header, and i have to use extension mod header or burp suite

[@typoerror177]

yay for vuejs

[@BraedenSmith]

Can we the response of override non-GET requests? I would guess not because it requires introspection of the payload/other verbs are intended to create side-effects.

[@pipchenko]

Hi, is it possible to share with other colleagues this override folder in order to have everything being overriden out of the box?

[@Grenadier8439]

what about overriding StatusCode?

[@DuffMan]

Any plans to make graphQL overrides work better? If I recall, because there's only one graphQL endpoint, overrides affects all of them instead of the specific desired operation/request.

[@chaos_monster]

can I configure this with something like Playwright or other E2E tools, so I can mock my backend when I just want to test my frontend in a browser?

[@bepamungkas]

Look up APIRequestContext + route.fulfill for playwright, or request interception for puppeteer.

[@jonghakseo9881]

use msw(mock service worker)

[@donnifan5685]

If the url has a cache burster string this override is not working. Can we provide regex somehow like it is available in fiddler

[@basheeral-momani2032]

I need to overrive the query string 😥

[@jogendrapal9275]

very helpfull

[@augustorickes2728]

from BrazilJS 🧙‍♂️

[@kandeepasundaram2501]

Is it possible to have some wild card for the url while mocking?

[@jecjecfish]

Currently it's not possible

[@mizuchin36]

これは便利！

[@AniltonNeto]

please add jq for test in chrome :P

[@idofilus7464]

gold

[@sravant]

Is google promoting React? See the t-shirt of the instructor.😜

[@RickBeacham]

Where did you get that T-Shirt? REACTions. LOL..

[@flelfwastaken]

Nice Feature, but feel i feel like it shuld indikate that data has been alternated in some way or it will be used by scammers to trick people

[@armandoenriquez1104]

Jane and Dora Winifred Read.

[@Hoop0u]

How to see pages your not allowed to 101

[@armandoenriquez1104]

Again!

[@danielschwartz516]

never worked for me

[@jecjecfish]

May i know why, can you share example?

[@danielschwartz516]

yea. several times tried to enable CORS requests (Post).
from what I rememer from last time (1 month ago) the browser just returned the same response headers event tough I have overriden them (for both preflight and the Post).
I think haf some issue with the override domain (was not saved for the correct domain).

[@danielschwartz516]

Also probably was using Vivaldi

[@armandoenriquez1104]

Arthur.

[@espiat9505]

1 in chat

[@armandoenriquez1104]

Pal.

[@armandoenriquez1104]

D.W. Read.

[@armandoenriquez1104]

Again.

[@dororo1337]

Cool , now i can fake my paypal balance and share a screen or video and refresh page :D or faking any other data like number of followers. 😈

[@armandoenriquez1104]

Again.

[@armandoenriquez1104]

Again.