CODEWITHSUNDEEP
javascriptfirefoxgoogle-chrome-devtoolswebpacksource-maps
Jonathan Mellman
Jonathan Mellman

Reputation: 161

Chrome not requesting JS source map, but Firefox does

I'm using webpack to build my client JS with the devtool: 'source-map' option, so my JS bundle ends in //# sourceMappingURL=app.bundle.js.map. When I open chrome devtools, Chrome shows a "Source Map detected" banner but does not actually show the original sources in the navigator. My server access logs don't show any requests for the source map.

When I open the same page with Firefox dev tools, it loads the source map exactly as expected.

All other assets load fine. Clearing my browser cache doesn't help.

Has anyone experienced this? Is this a Chrome bug?

Upvotes: 14

Views: 4784

Answers (1)

Andriy Horen
Andriy Horen

Reputation: 2940

I have double-checked it on Google Chrome v53 it won't log any sourcemap-related requests (Network tab / Console) no matter what was response status 200 or 404. It means you need to make sure that your webserver is serving file properly. For that you can simply open sourcemap url in the browser e.g.

//# sourceMappingURL=sourcefile.js.map

localhost:3000/path/to/your/sourcefile.js.map

As alternative you can change your build so that sourcemap is inlined in js file. Then you don't need to fetch it from the server.

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uI...

Upvotes: 2

Related Questions