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?

Medamedal

Just happened to me. I closed my console (which ended the pause/break I was on, but that was okay for me) and then reopened my console and the mapped source was displayed as expected. I'm not providing this as an "Answer" because I don't know the reason for the original issue and I don't know how to get the mapped source to display without leaving the pause/breakpoint. – Nuno

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

Tanga