CODEWITHSUNDEEP
reactjsgoogle-chrome-devtools
anvin
anvin

Reputation: 560

React App and Chrome DevTools local overrides not working?

I am trying to debug a chunk of js code from a CSR React app using chrome dev tools local overrides (https://developers.google.com/web/updates/2018/01/devtools#overrides). I am changing the files in the sources tab and save them into being local overrides.

Every change I enable in local overrides is visible inside the chrome dev tools overrides tab after refresh. But the local changes do not apply to the React app I am seeing. After every reload I am seeing the react app as it would be without any changes/overrides.

I have tried to do local overrides through the chrome dev tools on other non react sites, there it is working.

Am I missing something or are local chrome devtools overrides not possible with a CSR React app?

EDIT: Note I am trying to apply Chrome dev tools overrides to a deployed production CSR React App.

Upvotes: 8

Views: 16033

Answers (2)

Roman Roman
Roman Roman

Reputation: 917

You may encounter this problem if the website uses Service Workers.

To fix it go to Application tab and check Bypass for network

Upvotes: 12

anvin
anvin

Reputation: 560

Well I figured it out myself

For anyone else stumbling up on this:

In a React app you have to look into the chrome devtools network tab and open the chunk script in source tab. Then you can add it to overrides and modify the files.

Upvotes: 17

Related Questions