Menu
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?
238
The only workaround is to manually change the map URL to a public one (http://localhost:1234/file.map.js) and start a local webserver at this port.
Go to chrome://flags/#enable-devtools-experiments and enable the Developer Tools experiments, boot Chrome. Goto devtools, open the settings, and tick the "Enable CSS source maps" and "Auto-reload generated CSS". Inspect an element and, BOOM! There it is.
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...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
