我正在开发一个带有webview的VSCode扩展。在这个webview中,我运行了一个脚本bundle.js
,它源自与webpack捆绑在一起的许多TypeScript源代码。该脚本通过vscode-resource URI加载。相应的源映射文件bundle.js.map
位于文件系统中的旁边。
现在,当我在调试模式下从主机VS Code开始扩展并使用“开发人员:打开Webview开发人员工具”时,我只看到bundle.js
,提示有源映射。但是相应的TS源不会出现在导航器中,并且无法使用CMD-P加载。手动添加源映射(右键单击>添加源映射...)对vscode-resource URI和文件URI都没有任何影响。
当我将webview的HTML直接用作Chrome中的文件但使用相对URL加载完全相同的脚本时,我会在Chrome调试器中很好地看到所有来源。
如何说服Webview Dev Tools使用它运行的脚本的源映射?
感谢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...
};