Question

我正在开发具有Webview的VSCode扩展。在此Web视图中，我运行一个脚本bundle.js，该脚本源自与Webpack捆绑在一起的许多TypeScript源。该脚本是通过vscode资源URI加载的。相应的源映射文件bundle.js.map在文件系统中紧挨着它。

现在，当我以调试模式从主机VS Code启动扩展并使用“开发人员：打开Webview开发人员工具”时，仅看到bundle.js，并带有提示，即存在源映射。但是，相应的TS源不会出现在导航器中，也无法使用CMD-P加载。手动添加源映射（右键单击>添加源映射...）对vscode-resource URI或文件URI都无效。

当我直接在浏览器中使用webview的HTML作为文件但使用相对URL加载相同的脚本时，我在Chrome调试器中看到的所有源代码都很好。

如何说服Webview开发工具使用其运行脚本的源映射？

Answer 1

感谢https://vscode-dev-community.slack.com的eamodio告诉我答案：

确保eval-source-map是webpack配置中的devtool。

例如，我的webpack配置为：

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...
};

VS Code Webview Developer工具可以处理源映射吗？

1 个答案: