VS Code：使用 browserify 时如何映射路径以在 Chrome 中进行调试？

编程问答 2022-05-30

问题描述

我在 VS Code 中访问原始源映射 *.js 文件时遇到问题。目前，在调试时，我只能在 Chrome 中设置断点并将它们发送到 VS Code 中的伪 js 文件中。

问题如下： 使用 VS Code 进行调试时，打开的 Chrome 标签页的“*.js”文件，如 ma​​in.js 的路径为：localhost:3000/js/src/js/main.js。

我的ma​​in.js的原始路径如下：localhost:3000/src/js/main.js.

由于这种差异，在 Chrome 中设置和触发的断点将返回到 VS Code，其中将打开一个包含 Chrome 目录 localhost:3000/js/src/js/main.js 的新“main.js”。

如何删除 Chrome 添加的路径中额外的“js”部分？

作为参考，我使用 gulp-browserify 来捆绑我的 javascript 文件并使用 gulp-sourcemap 生成外部（而不是内联）源映射

我尝试过 outFiles：

"outFiles": [
   "${workspaceFolder}/dist/js/*.js"
]

尝试定义生成的文件所在的位置。

我也试过pathMapping：

"pathMapping": {
   "http://localhost:3000/js/src/js/*": "${workspaceFolder}/src/js/*"
}

尝试告诉 VS Code 看起来像左边的键的路径应该重写为右边的值。

最后，我还尝试了 sourceMapPathOverrides：

"sourceMapPathOverrides": {
   "*": "${workspaceFolder}/src/*"      
},

尝试将相对源映射路径重新映射到我的 src 目录。

这里有什么我遗漏的吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

browserifybrowserifybrowserifygulpgulpjavascriptvisual-studio-code