New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack source maps are broken for debugging in Firefox #1194

Open
Stuk opened this Issue Jun 25, 2015 · 41 comments

Comments

Projects
None yet
@Stuk

Stuk commented Jun 25, 2015

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:

screencap

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

@sokra

This comment has been minimized.

Member

sokra commented Jun 27, 2015

Propably a FF issue...

@mllocs

This comment has been minimized.

mllocs commented Jun 29, 2015

this might fix the issue: mishoo/UglifyJS2#738

@tirithen

This comment has been minimized.

tirithen commented Nov 10, 2015

👍

@bebraw bebraw added the bug label Nov 14, 2015

@bebraw

This comment has been minimized.

Member

bebraw commented Nov 14, 2015

@Stuk Can you still see this issue?

@Stuk

This comment has been minimized.

Stuk commented Nov 17, 2015

@bebraw yep. I just checked on FF 42.0 and webpack 1.12.6, and I can still see this issue using the repo in the description. It seems like breakpoints sometimes work... but are very unreliable.

@amarandon

This comment has been minimized.

amarandon commented Jan 10, 2016

Here with Firefox 45.0a2 I'm not able to get any source map to work with Firefox. I tried with source maps generated by uglify and babel and they both work in Chrome but not in Firefox. It's ironic since they're both based on the source-map package which is also the one used by Firefox.

@adamziel

This comment has been minimized.

adamziel commented Jan 11, 2016

@amarandon I have the same issue

@amarandon

This comment has been minimized.

amarandon commented Jan 11, 2016

@adamziel Actually it works in the debugger, it's just that error messages in the console point to the compiled code: https://youtu.be/pgS3x1hGPZ0
I've contacted the developer on Twitter: https://twitter.com/alex_marandon/status/686514228572864512

@es6Test

This comment has been minimized.

es6Test commented Feb 26, 2016

Also having no luck with chrome anymore.

@maxdow

This comment has been minimized.

maxdow commented Feb 26, 2016

in my case chrome is working since sourcemaps are correctly defined. I can confirm the issue with FF..

@es6Test

This comment has been minimized.

es6Test commented Feb 26, 2016

here is my config that breaks chrome:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: [
    'babel-polyfill',
    './app/app.js'
  ],
  output: {
    publicPath: '/',
    filename: 'dist/main.js'
  },
  debug: true,
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'app'),
        loader: 'babel',
        query: {
          presets: ['es2015']
        }
      },
      { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' },
      { test: /\.css$/, loader: 'style-loader!css-loader' }

    ]
  },
  resolve: {
    extensions: ["", ".webpack.js", ".web.js", ".js", ".css",".styl"]
  }
};
"devDependencies": {
    "autoprefixer-loader": "^3.1.0",
    "babel-core": "^6.1.20",
    "babel-loader": "^6.1.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-stage-1": "^6.3.13",
    "css-loader": "^0.23.1",
    "material-ui": "^0.14.0",
    "style-loader": "^0.13.0",
    "stylus-loader": "^1.5.1",
    "tape": "^4.2.2",
    "webpack": "^1.12.12",
    "webpack-dev-server": "^1.12.1"
  },
  "dependencies": {
    "babel-polyfill": "^6.1.19",
    "moment": "^2.11.2",
    "normalize.css": "^3.0.3"
  }
@bogas04

This comment has been minimized.

bogas04 commented Apr 3, 2016

Can we please fix this? I don't want to choose Chrome as the browser only coz of this issue.

@Stuk

This comment has been minimized.

Stuk commented Apr 3, 2016

According to https://bugzilla.mozilla.org/show_bug.cgi?id=1177329 this should be fixed in FF nightly builds. Afraid I can't check as I'm on vacation at the moment

@bogas04

This comment has been minimized.

bogas04 commented Apr 3, 2016

I'm on 48.0a1 (2016-04-02) and it doesn't seem to work here sadly!

@bogas04

This comment has been minimized.

bogas04 commented Apr 3, 2016

Screenshots:

Vilvadi Browser (Effectively Chrome)
screen shot 2016-04-03 at 6 34 35 pm
Firefox Nightly 48.0a1 (2016-04-2)
screen shot 2016-04-03 at 6 34 42 pm

@jontonsoup

This comment has been minimized.

jontonsoup commented Apr 8, 2016

can confirm this works in ff nightly and not in chrome Version 51.0.2700.0 dev (64-bit)

@activescott

This comment has been minimized.

activescott commented Jun 20, 2016

Using devtool: 'eval' here is what I'm seeing:

  • Firefox 48.0b1 (beta channel): NOT working
  • FirefoxDeveloperEdition 49.0a2 (2016-06-19): NOT working
  • Chrome 51.0.2704.103 (64-bit): working
@aCandidMind

This comment has been minimized.

aCandidMind commented Jul 19, 2016

Using FF 46.0 on Ubuntu.
eval-source-map - sort of works
source-map - sort of works
Where sort of works means, I can find the original JSX source files (which have no syntax highlighting), set a breakpoint into them and they are triggered. But the console always shows the useless bundle lines.

@spacem

This comment has been minimized.

spacem commented Aug 28, 2016

Since sourcemaps were not working I switched to chrome which was fine for a while but then also stopped working. Someone said on chrome to fix it just delete these files:
chrome-devtools_devtools_0.localstorage
chrome-devtools_devtools_0.localstorage-journal

Deleting them made sourcemaps start working again on chrome (in52.0.2743.116 m). Not sure really what that does but I wonder is there a similar fix for firefox?

@ricochet1k

This comment has been minimized.

ricochet1k commented Oct 22, 2016

@SpaceK33z

This comment has been minimized.

Member

SpaceK33z commented Dec 7, 2016

Can anyone verify that the issue is fixed? See also @ricochet1k's comment above.

@wallacyyy

This comment has been minimized.

wallacyyy commented Feb 3, 2017

I was not able to make this work, even with source maps turned on, different devTools or disabling the new web console on firefox. Tested with the last Nightly build.
If someone got this working plz add something here 😞

@SpaceK33z

@gabrielmicko

This comment has been minimized.

gabrielmicko commented Mar 27, 2017

For me sourcemaps work finally inside FF with this config:

output: { path: buildPath, //Path where the bundle should be exported filename: 'bundle.js', //Filename sourceMapFileName: 'bundle.js.map', //Filename publicPath: '/js/' //Where the js gets loaded from }, devtool: 'source-map',

Also please read this article:
https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map

I published an edit for the article which is not reviewed yet, but it is about setting devtools.sourcemap.locations.enabled to true at the about:config section.

Enjoy.

@rahulthewall

This comment has been minimized.

rahulthewall commented Mar 31, 2017

@gabrielmicko Thanks a lot! I can come back to FF now :)

@webpack-bot

This comment has been minimized.

webpack-bot commented Sep 30, 2017

This issue had no activity for at least half a year.

It's subject to automatic issue closing if there is no activity in the next 15 days.

@webpack-bot

This comment has been minimized.

webpack-bot commented Oct 15, 2017

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

@spookylukey

This comment has been minimized.

spookylukey commented Dec 6, 2017

The key point here is that 'eval-source-map' is partially broken for Firefox (you can set break points in the original sources, but stack traces from exceptions point uselessly to the compiled version, and typically to an eval at that). 'source-map' works fine, and 'inline-source-map' also works. I haven't tried all the options.

With Chrome, both work.

Please can we re-open, even if it is just a documentation fix.

@kud

This comment has been minimized.

kud commented Dec 7, 2017

The only thing which works everywhere for me is: cheap-module-inline-source-map

@evilebottnawi evilebottnawi reopened this Dec 7, 2017

@webpack-bot webpack-bot removed the inactive label Dec 7, 2017

@wlach

This comment has been minimized.

wlach commented Jan 30, 2018

Ran into this today. FWIW, I filed a bug in Firefox with a reproducible test case: https://bugzilla.mozilla.org/show_bug.cgi?id=1434081. This affects a bunch of Mozilla projects so I'm hoping to apply some leverage to get this fixed.

@robertjk

This comment has been minimized.

robertjk commented Feb 13, 2018

I have similar issue - source maps of CSS are not loaded properly in Firefox Developer Tools (they do load properly in Chrome Developer Tools). In addition the console presents me with errors like below:

Source map error: Error: sourceMapURL could not be parsed Resource URL: blob:null/b9a1fdd6-c0a3-4426-9df0-d50f1e8dc670 Source Map URL: data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3JvYmVydC9wcm9ncmFtbWluZy93ZWJwYWNrLXBsYXlncm91bmQvc3JjL2NvbXBvbmVudC1hL2NvbXBvbmVudC1hLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtJQUNJLGNBQWM7SUFDZCx1QkFBdUI7SUFDdkIsa0JBQWtCO0NBQ3JCOzs7QUFHRDtJQUNJLG1CQUFtQjtJQUNuQixpQkFBaUI7SUFDakIsaUJBQWlCO0NBQ3BCOzs7QUFHRDtJQUNJLG1CQUFtQjtDQUN0QiIsImZpbGUiOiJjb21wb25lbnQtYS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuQ29tcG9uZW50QSB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGZsZXgtd3JhcDogbm93cmFwO1xufVxuXG5cbi5Db21wb25lbnRBLUhlYWRlciB7XG4gICAgbWFyZ2luLWJvdHRvbTogM3B4O1xuICAgIGJhY2tncm91bmQ6ICNlZWU7XG4gICAgZm9udC1zaXplOiAxLjVlbTtcbn1cblxuXG4uQ29tcG9uZW50QS1Cb2R5IHtcbiAgICBwYWRkaW5nLWxlZnQ6IDEwcHg7XG59XG4iXSwic291cmNlUm9vdCI6IiJ9[Learn More]

I found that the loader causing the problem is style-loader - if I remove it (and use extract-text-webpack-plugin instead) the source maps work fine in Firefox. So it seems to me it's the issue with style-loader, not the webpack itself.

@evilebottnawi

This comment has been minimized.

Member

evilebottnawi commented Feb 13, 2018

@robertjk can you create issue in style-loader with reproducible test repo, thanks!

@robertjk

This comment has been minimized.

robertjk commented Feb 13, 2018

@evilebottnawi Okay, I'll try to.

@robertjk

This comment has been minimized.

robertjk commented Feb 13, 2018

@jasonLaster

This comment has been minimized.

jasonLaster commented May 16, 2018

Hi, I believe our sourcemap support has improved a lot in the past year. I'd love to see what people think of Developer Edition

https://hacks.mozilla.org/2018/05/debugging-modern-web-applications/

@evilebottnawi

This comment has been minimized.

Member

evilebottnawi commented May 16, 2018

@jasonLaster we need testing to ensure problem doesn't exists anymore looks we have reproducible repos above

@GDIBass

This comment has been minimized.

GDIBass commented Jun 2, 2018

Developer version didn't work for me. I'm still not seeing sass sources (works in Chrome).

@wis

This comment has been minimized.

wis commented Jun 3, 2018

@jasonLaster i'm developing a webExtension with Angular using the CLI (don't have access to webpack config)
and sourcemaps are not loading, is it CSP?

03:16:05.059 Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://9c9e49d3-2bf8-43ac-b952-1432b2ba877c/polyfills.js
Source Map URL: polyfills.js.map[Learn More]
03:16:05.074 Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://9c9e49d3-2bf8-43ac-b952-1432b2ba877c/runtime.js
Source Map URL: runtime.js.map[Learn More]
03:16:05.075 Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://9c9e49d3-2bf8-43ac-b952-1432b2ba877c/vendor.js
Source Map URL: vendor.js.map[Learn More]
03:16:05.076 Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://9c9e49d3-2bf8-43ac-b952-1432b2ba877c/main.js
Source Map URL: main.js.map[Learn More]
03:16:05.076 Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://9c9e49d3-2bf8-43ac-b952-1432b2ba877c/styles.js
Source Map URL: styles.js.map[Learn More]

here's the CSP I've tried in manifest.json:
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self' blob: filesystem:;"
everything's fine in Chrome

@viorelsfetea

This comment has been minimized.

viorelsfetea commented Jun 28, 2018

I'm having the exact same problem as @wis. the map file is there, I can access it by hand, but the extensions debugging window can't see it. Does anybody have any ideas?

@jasonLaster

This comment has been minimized.

jasonLaster commented Jun 29, 2018

@rpl

This comment has been minimized.

rpl commented Jul 4, 2018

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

@szalapski

This comment has been minimized.

szalapski commented Oct 16, 2018

Is there a way to exclude certain files from even looking for a map?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment