Debugging with source maps

[codewithcheese]

Thanks so much for the webextension toolbox.

I feel really dumb since I can not for the life of me to get sourcemaps to load in Firefox. The .map files are present but in Firefox they fail to load.

I have managed to get them working in chrome by adding the extension directory as a workspace.

I generated a extension with generator-web-extension and have tried loading it via about:debugging in firefox and web-ext.

I receive the following error.

Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://1cbd74c0-6413-472e-a5f8-10fcf1debb5f/scripts/background.js
Source Map URL: background.js.map[Learn More] (unknown)

I am expecting source maps to load and to be able to set a breakout point in background.js.

Tech	Version
webextension-toolbox	1.1.1
node	9.11.1
OS	Ubuntu 16.04
browser	Firefox 60

[HaNdTriX]

We use webpacks devtool feature under the hood.
So you can choose between the following source-maps types: https://webpack.js.org/configuration/devtool/

From what I understand from the following issue is that not all source-maps will work in Firefox.
webpack/webpack#1194. Especially in Firefox extensions they are having issues.

Since I am currently on vacation, I can't actually test this. Please let me know if this helps.

webextension-toolbox build firefox --devtool=cheap-eval-source-map

[codewithcheese]

Please continue your vacation! Thank you very much for taking the time to reply.

--devtool=cheap-eval-source-map --devtool=cheap-module-eval-source-map --devtool=eval-source-map all resulted in Error: call to eval() blocked by CSP in Firefox

--devtool=source-map --devtool=cheap-eval-source-map --devtool=cheap-module-source-map --devtool=nosources-source-map all result in Source map error: TypeError: NetworkError when attempting to fetch resource. Resource URL: moz-extension://18976e87-dc30-4cee-b24c-a35740a20302/scripts/background.js Source Map URL: background.js.map[Learn More] (unknown)

--devtool=hidden-source-map no error and no source maps that I can see.

--devtool=inline-cheap-source-map --devtool=inline-cheap-module-source-map --devtool=inline-source-map all work! 👍

[balcsida]

Hi @codewithcheese,

If it's not a problem, I reopened this issue and I will add this information to the README.md, as this can be useful for others as well.