Relative SourceMap paths for debugging in WebStorm

I’d like to debug an application’s JavaScript source files in WebStorm using SourceMaps. However this does not work with SourceMap files generated by webpack (devtool: source-map).

It seems that the path mapping to the original files is not provided in a way which WebStorm and maybe other tools can understand. It does work with a SourceMap generated using r.js together with Almond. These source maps use relative paths to point to the original files instead of webpack-module:// URLs.

Is there a way to make webpack generate relative path information for the sources of a SourceMap? Or any other solution?

Example

Consider a project structure to be like this:

project/
  app/
    bower_components/
        a/
          lib.js
    src/
       main.js
       example.js
    index.html

  build
    src/
       main.js
       main.js.map
    index.html

Webpack SourceMap

The application source files residing in app/ are built to the build/ dir, with main being the entry chunk.
For specifying the source files the simplified main.js.map generated by webpack contains:

{
    "sources":["webpack/bootstrap fc4e6211bca39864adc8","./main.js","./example.js","../bower_components/a/lib.js"],
    "sourceRoot":"webpack-module://"
}

Thus according to the spec the URL to example would be webpack-module://./example.js because the sourceRoot is simply prepended. This can be seen in the Firefox dev tools where every source file URL would be displayed this way without any grouping by directory. Chrome dev tools seem to be a bit cleverer and group sources located in ../ or ./ in a tree view. In both browsers setting a breakpoint for debugging works. Perhaps because the sourcesContent is included so the original source files are not required.

However in WebStorm it is not possible to set a breakpoint in app/src/example.js and debug the build/index.html so that the breakpoint is hit. Also it is not possible to view the source by navigating to it using the Debug > Structure | Text | Scripts panel.

r.js SourceMap with relative paths

The debugging in webstorm does work by changing the main.js.map to a format as generated by r.js:

{
    "sources":["../../app/src/main.js","../../app/src/example.js","../../app/bower_components/a/lib.js"]
}

By omitting sourceRoot and using relative paths to the source files (which are served by WebStorms built-in server) WebStorm seems to be able to find the correct source files.
Also the Firefox dev tools are now grouping the source files by directory which aids navigation.

Author: Fantashit

1 thought on “Relative SourceMap paths for debugging in WebStorm

Comments are closed.