VS Code 调试器：如何附加到浏览器同步服务的 Chrome 选项卡？答案

【问题标题】：VS Code Debugger: How to Attach to Chrome Tab served by browser-sync?VS Code 调试器：如何附加到浏览器同步服务的 Chrome 选项卡？
【发布时间】：2021-04-17 22:43:06
【问题描述】：

我无法找到通过 Browser-Sync 运行 VS Code 集成调试器的解决方案。我当前的 launch.json 不是使用 VS Code 调试器启动 chrome，而是如下所示：

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Chrome",
            "port": 9222,
            "request": "attach",
            "type": "pwa-chrome",
            "url": "http://localhost:3002",
            "webRoot": "${workspaceFolder}/dist"
        }
    ]
}

这个解决方案让我通过我的终端中的任务运行程序（“gulp”）启动浏览器同步，但是，它不允许我在 VS Code 中设置断点：

一旦我暂停调试器，我就会进入 browsersync.js 文件深处的某个地方（参见屏幕截图here）

在使用 gulp 并保持浏览器自动重新加载的同时在 VS Code 中进行调试是否有更好的方法？

【问题讨论】：

这很难！四个月，我们仍然没有一个答案！所以连 VSCode 大神都没有！我是一个面临同样问题的农民，也没有解决方案？？？？

标签： node.js npm visual-studio-code gulp browser-sync

【解决方案1】：

好的，发表评论后我决定再试一次，似乎一切都正常了！

我的情况有点特别，因为我有一个浏览器同步设置映射到其他几个文件夹 + 打字稿编译 + 汇总 + 多根工作区 + 内部制作的框架 + 其他要处理的事情。但最后，一个简单的解决方案对我有用：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "pathMapping": {
                "/": "${workspaceFolder}/dist",
            }
        }
    ]
}

这里的东西是pathMapping 属性，它可以帮助调试器找到源映射文件。就我而言，这些文件被映射（使用浏览器同步）到“/”路径，但它们位于我的项目根目录内的“/dist”文件夹中。

请记住，如果您像我一样拥有 typescript 源文件，则绝对需要在您的 tsconfig.json 文件中生成源映射文件设置 "sourceMap": true。

编辑我忘记提及的另一件事是，在您开始调试之前，浏览器同步服务器必须在另一个终端中运行。

【讨论】：