Can the VS Code Webview Developer tools deal with source-maps?

user_6176337 0
Viewed 1328

I am developing a VSCode extension with a webview. Inside this webview I run a script bundle.js that originates from a number of TypeScript sources bundled up with webpack. The script is loaded via a vscode-resource URI. The respective source map file bundle.js.map lies right next to it in the file system.

Now when I start my extension from a host VS Code in debug mode and use "Developer: Open Webview Developer Tools" I see the bundle.js only, with a hint, that there are source maps. But the respective TS sources don't appear in the navigator and cannot be loaded using CMD-P. Adding the source map by hand (right-click > Add source map...) doesn't have any effect, neither with a vscode-resource URI nor with a file URI.

When I use the webview's HTML as a file in Chrome directly but with a relative URL to load the very same script, I see all sources nicely in the Chrome Debugger.

How can I convince the Webview Dev Tools to use the source maps of the scripts it runs?

source-maps visual-studio-code webpack webview
1 Answers

Thanks to eamodio from https://vscode-dev-community.slack.com for telling me the answer:

Make sure eval-source-map is the devtool in the webpack config.

For example my webpack config is:

module.exports = {
  entry: "./src/main.js",
  output: {
      filename: "./bundle.js",
  },

  // Enable sourcemaps for debugging webpack's output.
  devtool: "eval-source-map",

  resolve: {
      // Add '.ts' and '.tsx' as resolvable extensions.
      extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
  },

  module: {

      rules: [

          { test: /\.tsx?$/, enforce: "pre", loader: "awesome-typescript-loader" },
          // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
          { test: /\.js$/, enforce: "pre", loader: "source-map-loader" }
      ]
  },

  // Other options...
};
user_43323960
Related