Webpack source maps are broken for debugging in Firefox

I’ve put together a quick repo to demonstrate the problem: https://github.com/Stuk/webpack-sourcemaps-firefox

And here’s a gif of the issue in action:

I’ve checked Uglify, and Firefox has no issues there. I’ve tried the different config options for devtool:

• eval - works
• cheap-eval-source-map - works
• cheap-source-map - does not work
• cheap-module-eval-source-map - works
• cheap-module-source-map - does not work
• eval-source-map - works
• source-map - does not work

So seems like eval is file, but an external sourcemap for multiple files does not.

Any thoughts about what’s going on?

I’ve also filed an issue on Bugzilla, in case this is a FF devtools issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1177329

[digitarald]

👋🏻 Firefox DevTools PM here.

I am collecting any remaining source-map issues after we fixed a whole lot in the past releases (summarized in my hacks article). I was glad to see that this a few issues mentioned here seem to be addressed, but I want to make sure.

We need your help 🙏. Please post if any remaining source map issues with the webpack configurations, potentially STRs or even open source projects that are affected. To let us understand our impact so far, please also share if previously broken source maps are working now. Feel free to reach out directly.

[rpl]

@wis @viorelsfetea @jasonLaster the extension’s CSP is not related to those errors, the source maps are fetched from a worker running on the devtools client side and so the CSP of the extension doesn’t have any effect on them.

Currently, a (very annoying) workaround to make the extensions’ sourcemaps available to the source-map worker could be to point the sourceMappingURL=... explicitly to an HTTP url, e.g. by temporarily changing it in the bundled/transpiled file into something like //# sourceMappingURL=http://localhost:8080/bundle.js.map and then make the source maps files available on that url by using something like python -m SimpleHTTPServer . The above workaround is also an additional proof that the extension CSP is not what is triggering this issue.

The actual issue is that Addon Debugging window is currently running in its own separate process and a separate Firefox profile from the Firefox browser instance where the extension is installed, and so the developer tools are trying to fetch the source map from a moz-extension url that is not available locally (where “locally” I mean “in the Toolbox process where the debugger UI and the worker that is fetching and parsing the source maps data are running”).

This issue is tracked by Bug 1437937 (and in this comment there are some details about a possible approach to fix it). To be fair the sources of the source-map module are part of the debugger-html github repo, and so we should probably file an issue also in the github repo, because the fix is likely to require changes to both the mozilla-central (for the changes needed on the “remote debugging server” side) and in the debugger-html repo (for the changes needed to the souce-map module, and on the debugger ui if needed).