Posted in Uncategorized

Webpack source maps are broken for debugging in Firefox

   February 23, 2021  9 Comments on 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:

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

Author: Fantashit

9 thoughts on “Webpack source maps are broken for debugging in Firefox”

  4. 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.

  6. 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.

Comments are closed.