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?

Are you unable to debug in development mode? Rather than trying to debug in production mode? — M0nst3R
– M0nst3R, Commented May 31, 2023 at 20:58
That would eliminate the issue but no - not easily. That’s why I’m looking for an alternative. — Richard Ver Steeg
– Richard Ver Steeg, Commented Jun 2, 2023 at 3:10

Richard Ver Steeg · Accepted Answer · 2023-06-02 22:01:40Z

2

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.

answered Jun 2, 2023 at 22:01

Richard Ver Steeg

811 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related