Override and mock network responses
ฝัง
- เผยแพร่เมื่อ 5 มิ.ย. 2024
- 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 - วิทยาศาสตร์และเทคโนโลยี
Very helpful feature when the backend apis are unstable 😊
Finally, very useful features solving day to day real problems
Exactly what I've wanted for a long time! Amazing news!
finally I can said goodbye to Fiddler Proxy
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.
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 🤠
Sick features, excited to try em out
brilliant! Love learning from you guys.
That's awesome! There's one very important feature missing, though: being able to mock the response status code.
This is huge! Amazing work! Is it possible to override the status code of the response?
Very helpful feature, thanks.
Cool stuff! Thanks!
wow thats the best one yet!
amazing!! Thank you so much
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
If I could give this video two thumbs up I would. Thanks!
can I control/overwrite response status code?
This was actually quite a funny and good video 🍻
amazing ❤ I haven't utilize already existing features yet tho
Amazing!
sometime i can not edit header, and i have to use extension mod header or burp suite
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?
Look up APIRequestContext + route.fulfill for playwright, or request interception for puppeteer.
use msw(mock service worker)
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.
yay for vuejs
If the url has a cache burster string this override is not working. Can we provide regex somehow like it is available in fiddler
You made my life easier!
Omg. Its a great feature
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.
what about overriding StatusCode?
I heard a "Tchau!"?
Great content and features.
Hi, is it possible to share with other colleagues this override folder in order to have everything being overriden out of the box?
I need to overrive the query string 😥
very helpfull
Fire 🔥
これは便利!
Is it possible to have some wild card for the url while mocking?
Currently it's not possible
🔥🔥🔥
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
Is google promoting React? See the t-shirt of the instructor.😜
from BrazilJS 🧙♂️
gold
please add jq for test in chrome :P
Where did you get that T-Shirt? REACTions. LOL..
How to see pages your not allowed to 101
Again!
Jane and Dora Winifred Read.
never worked for me
May i know why, can you share example?
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).
Also probably was using Vivaldi
1 in chat
Arthur.
Pal.
D.W. Read.
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. 😈
Again.
Again.
Again.