Chrome DevTools: local overrides for JS files from Webpack Source Map

Question

I am not totally happy with the usability of video player on coursera.org (not my own website) and want to change something using the local overrides for my own convenience.

I successfully located the JS file to be changed and enabled local overrides. But after I saved my changes the website still uses the file fetched from the server instead of the local copy containing my changes.

What is the problem and how to resolve this?

Answer 1

I realized this might be a bug of the local overrides feature: I could see the local change made to the global JS file but not for files restored by Webpack source maps (files under webpack://).

Here is a workaround:

1. first locate the file to be changed (using event listener breakpoints);
2. add a breakpoint to where you want to change. I added a breakpoint to line 24 but more breakpoints are created, which is a bug in DevTools I think. Then check the checkboxes in the right panel and you should see the original webpack-generated file (with the red cross in the tab);
3. right click the tab, select "Reveal in Network panel";
4. Right click the network call and select "Save for overrides";
5. Finally, open the saved file and make your changes. Refresh the page and you should see the overridden changes.

Hope this is helpful if you're in a similar situation!