我正在开发一个带有 webview 的 VSCode 扩展。在此 webview 中,我运行了一个脚本 bundle.js
,它源自与 webpack 捆绑在一起的许多 TypeScript 源。该脚本通过 vscode-resource URI 加载。相应的源映射文件 bundle.js.map
在文件系统中紧挨着它。
现在,当我在 Debug模式下从主机 VS Code 启动我的扩展并使用“Developer: Open Webview Developer Tools”时,我只看到 bundle.js
,并提示有源代码 map 。但是相应的 TS 源不会出现在导航器中,也无法使用 CMD-P 加载。手动添加源映射(右键单击 > 添加源映射...)没有任何效果,无论是使用 vscode-resource URI 还是文件 URI。
当我在 Chrome 中直接使用 webview 的 HTML 作为文件但使用相对 URL 来加载完全相同的脚本时,我在 Chrome 调试器中可以很好地看到所有源。
我如何说服 Webview 开发工具使用它运行的脚本的源映射?
最佳答案
感谢来自 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...
};
关于webpack - VS Code Webview Developer 工具可以处理源映射吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54147824/