How can I locally override a source-mapped JavaScript file in Chrome DevTools?

Question

I have a bundle of minified JavaScript files (created with babel) along with a source map file. I can use the source map to add break points and step through the original code. What I'd like to do now is to create a local override of the original code in order to test some changes.

As I understand the process of debugging with a source map, the browser is executing the minified code from the bundle and mapping it to the original code as a convenience for debugging. My attempts to override the original file seem to confirm this. No matter what I do to the original file, I can clearly demonstrate that the minified code from the bundle is executed. So it seems like any local override is not possible - is there anyway around this?

Answer 1

The solution is to go dev tool settings (gear icon) and UNCHECK Enable JavaScript source maps. With source maps disabled I can override the bundle, make modifications, and set breakpoints directly in the bundled code. This works well enough for limited changes which is all I was proposing to use it for.