Chrome not requesting JS source map, but Firefox does

Question

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?

Answer 1

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 eg

//# 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...