Skip to content
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

Closed
Stuk opened this issue Jun 25, 2015 · 80 comments
Closed

Webpack source maps are broken for debugging in Firefox #1194

Stuk opened this issue Jun 25, 2015 · 80 comments
Labels

Comments

@Stuk
Copy link

@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
Copy link
Member

@sokra sokra commented Jun 27, 2015

Propably a FF issue...

@mllocs
Copy link

@mllocs mllocs commented Jun 29, 2015

this might fix the issue: mishoo/UglifyJS#738

@tirithen
Copy link

@tirithen tirithen commented Nov 10, 2015

👍

@bebraw bebraw added the bug label Nov 14, 2015
@bebraw
Copy link
Contributor

@bebraw bebraw commented Nov 14, 2015

@Stuk Can you still see this issue?

@Stuk
Copy link
Author

@Stuk 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
Copy link

@amarandon 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
Copy link

@adamziel adamziel commented Jan 11, 2016

@amarandon I have the same issue

@amarandon
Copy link

@amarandon 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
Copy link

@es6Test es6Test commented Feb 26, 2016

Also having no luck with chrome anymore.

@maxdow
Copy link

@maxdow maxdow commented Feb 26, 2016

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

@es6Test
Copy link

@es6Test 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
Copy link

@bogas04 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
Copy link
Author

@Stuk 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
Copy link

@bogas04 bogas04 commented Apr 3, 2016

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

@bogas04
Copy link

@bogas04 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
Copy link

@jontonsoup 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
Copy link

@activescott 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
Copy link

@aCandidMind 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
Copy link

@spacem 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
Copy link

@ricochet1k ricochet1k commented Oct 22, 2016

@SpaceK33z
Copy link
Member

@SpaceK33z SpaceK33z commented Dec 7, 2016

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

@wallacyyy
Copy link

@wallacyyy 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
Copy link

@gabrielmicko 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
Copy link

@rahulthewall rahulthewall commented Mar 31, 2017

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

@webpack-bot
Copy link
Contributor

@webpack-bot 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.

@adjenks
Copy link

@adjenks adjenks commented May 13, 2020

Sourcemaps work fine in chrome for me, still fail in FF.

@digitarald
Copy link

@digitarald digitarald commented May 13, 2020

@adjenks any more details on your project setup?

@theAdhocracy
Copy link

@theAdhocracy theAdhocracy commented May 14, 2020

I'm also still seeing these errors in Firefox, precisely the same as @belka-ew above. Works fine in Chrome. I'm using webpack via Gatsby 2.21.21, and using Yarn 1.22.1 if that matters at all. I'm not doing anything else unusual (i.e. Gatsby defaults).

@loganfsmyth
Copy link
Contributor

@loganfsmyth loganfsmyth commented May 14, 2020

@theAdhocracy Errors like TypeError: Invalid URL: . should be fixed on Firefox Nightly right now, if you want to try that to verify.

@theAdhocracy
Copy link

@theAdhocracy theAdhocracy commented May 15, 2020

@loganfsmyth Yep, just downloaded the latest version of Nightly and the errors are gone. That's excellent news 👍

@lschnoller
Copy link

@lschnoller lschnoller commented Jun 1, 2020

I have a vue app and source-map works perfectly with chrome but i still can't make it work with FF v76.0.1, v77.0b9 developer ed. nor 78.0a1 nightly build. It works fine with js files but not with vue files. In my vue.config.js i have set configureWebpack: {
devtool: "source-map", ... } What could be happening here? PLEASE HELP! THANKS

@digitarald
Copy link

@digitarald digitarald commented Jun 1, 2020

I have a vue app and source-map works perfectly with chrome but i still can't make it work with FF v76.0.1, v77.0b9 developer ed. nor 78.0a1 nightly build. It works fine with js files but not with vue files. In my vue.config.js i have set configureWebpack: {
devtool: "source-map", ... } What could be happening here? PLEASE HELP! THANKS

I assume you don't see any source map errors in Console? Just as second validation step, could you run your code through https://sourcemaps.io/ ? If it all shows up green, you could send the .map and .js files to me.

@lschnoller
Copy link

@lschnoller lschnoller commented Jun 3, 2020

I assume you don't see any source map errors in Console? Just as second validation step, could you run your code through https://sourcemaps.io/ ? If it all shows up green, you could send the .map and .js files to me.
Hi @digitarald! i don't see any source map errors in Console. I have run the code through https://sourcemaps.io/ and got lots of errors that i can't figure out. Bottomline is the sourcemap works fine with chrome but not in FF, any other ideas?

@azukaar
Copy link

@azukaar azukaar commented Jun 3, 2020

Also broken for me in FF with any devtool value.
Sourcemaps appear but error points to bundled code

@digitarald
Copy link

@digitarald digitarald commented Jun 3, 2020

Also broken for me in FF with any devtool value.
Sourcemaps appear but error points to bundled code

@azukaar can you reproduce on Firefox Nightly or DevEdition? It would help if you have more specific STR – but it sounds like source maps don't load at all.

@digitarald
Copy link

@digitarald digitarald commented Jun 3, 2020

I assume you don't see any source map errors in Console? Just as second validation step, could you run your code through https://sourcemaps.io/ ? If it all shows up green, you could send the .map and .js files to me.
Hi @digitarald! i don't see any source map errors in Console. I have run the code through https://sourcemaps.io/ and got lots of errors that i can't figure out. Bottomline is the sourcemap works fine with chrome but not in FF, any other ideas?

@lschnoller thanks for sharing your project via email. So far is looks like this issue is tracked in https://bugzilla.mozilla.org/show_bug.cgi?id=1642397 , which causes multiple vue files with similar names to show up as only one entry. Workaorund until we fix it (79, current nightly) is opening the files via Cmd-P quick open – can you confirm that this works?

@lschnoller
Copy link

@lschnoller lschnoller commented Jun 3, 2020

@lschnoller thanks for sharing your project via email. So far is looks like this issue is tracked in https://bugzilla.mozilla.org/show_bug.cgi?id=1642397 , which causes multiple vue files with similar names to show up as only one entry. Workaorund until we fix it (79, current nightly) is opening the files via Cmd-P quick open – can you confirm that this works?

Hi @digitarald! Correct. 'Cmd-P' works. It seems the wrong files are being hidden. In the file browser i get listed for example the file index.vue?xyz but not the source-mapped .vue file. It would be awesome to gray out all the .vue?xyz extra extensions and display the .vue files normally.

@zuzusik
Copy link

@zuzusik zuzusik commented Jun 5, 2020

UPD: this has been figured out, details: #1194 (comment)

==============

I am seeing cases like this in both Firefox nightly and stable:
(79.0a1 (2020-06-05) (64-bit) and 77.0.1 (64-bit) respectively)

Screen Shot 2020-06-05 at 5 19 30 PM

I am building with Angular CLI, which uses Webpack under the hood. I am on macOS.

As you see - the positions are invalid - I can't set breakpoint on line 77. The workaround is to set it on line 78, but this is just a guess game - I need to guess every time.

In Google Chrome all is fine:

Screen Shot 2020-06-05 at 5 32 36 PM

@loganfsmyth
Copy link
Contributor

@loganfsmyth loganfsmyth commented Jun 5, 2020

@zuzusik If you can make a reproduction example, filing a new FF debugger bug in https://bugzilla.mozilla.org would be ideal.

@lschnoller
Copy link

@lschnoller lschnoller commented Jun 12, 2020

@digitarald hi! is there any update on this? (was there a release of some kind where we could look at it?). Thanks

@adjenks
Copy link

@adjenks adjenks commented Jun 12, 2020

Maybe they're just waiting for Firefox to fix it. Would be nice if vue/webpack changed their method to make it backwards compatible though.

@digitarald
Copy link

@digitarald digitarald commented Jul 1, 2020

📯 The fix for missing .vue files landed in today's Nightly and will ride the trains with Firefox 80.

@lschnoller
Copy link

@lschnoller lschnoller commented Jul 2, 2020

@digitarald Just checked out the nightly build and it's looking good! I could find the vue files and even place a breakpoint on an await (async) call, which cannot be done in chrome. One great thing that would be awesome that still doesn't work is to be able to step over an await (async) call and get to the next operation in your code instead of getting into the middle of an internal library js file.

@zuzusik
Copy link

@zuzusik zuzusik commented Jul 2, 2020

@loganfsmyth FYI: I have figured out mentioned issues - it was because I didn't have sourcemaps processing enabled in ng-annotate-loader. This loader changes output code, so for source maps to match, it also should be enabled to process them, and that's not a default setting in underlying ng-annotate tool.

I was thinking this is particularly the issue of Firefox, cause somehow Google Chrome is able to recover from that situation (well, we all know how good they are in supporting different weird cases).

Sorry for late heads-up and thanks for all your work on making Firefox better for devs! Maybe one day I will finally switch back to it (moved to Chrome since Firebug has gone, made several attempts to come back, latest one with Firefox 77, but still it's not there for me)

@alexander-akait
Copy link
Member

@alexander-akait alexander-akait commented Aug 31, 2020

Is anyone still having problems? Firefox 71 fixed many issue with source maps, need feedback

@belka-ew
Copy link

@belka-ew belka-ew commented Aug 31, 2020

Is anyone still having problems? Firefox 71 fixed many issue with source maps, need feedback

Works fine for me on the Developer Edition.

@jasonLaster
Copy link

@jasonLaster jasonLaster commented Aug 31, 2020

@evilebottnawi @belka-ew I'm so glad that sourcemaps are working better.

Big props to @loganfsmyth!

@alexander-akait
Copy link
Member

@alexander-akait alexander-akait commented Sep 1, 2020

I'll keep the problem open for a while (2 weeks) for feedback, then I close, but if you find something not working, please let us know

@rtouze
Copy link

@rtouze rtouze commented Nov 13, 2020

I had the issue until now. I removed the line devtool: 'inline-source-map' from webpack configuration file and it works (it uses eval by default, does'nt it?).

@alexander-akait
Copy link
Member

@alexander-akait alexander-akait commented Feb 10, 2021

Closing due to inactivity. Please test with latest v5 and feel free to reopen if faced with the problem again (will be great if you provide reproducible test repo, this allow to fix a problem ASAP). Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet