visual-studio-code - 无法通过附加到 Chrome 在 VS Code 中进行调试

Question

我在launch.json中有默认配置。该站点在端口 8080 上运行。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

但是，当我单击“调试”按钮时，出现此错误:

Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222

问题一:为什么VS Code在创建这个json的时候会分配9222端口？
这个端口有什么特别之处以至于 MS 决定把它放在这个 launch.json 中？
问题 2:我需要改变什么才能使事情发挥作用？
Launch 调试总是会启动一个新窗口。
我在问 特别是关于附加调试选项 ，以便它将在新选项卡中打开。

Answer 1

您需要安装 Debugger for Chrome 扩展程序才能正常工作。在 VS Code 中打开扩展并搜索 Debugger for Chrome

您需要在第一个配置中指定的 URL 上运行 Web 服务器(默认为 http://localhost:8080 )。我用 serve我全局安装的 npm 包。从我的应用程序文件夹中，我运行 serve -p 8080

选择针对本地主机启动 Chrome 选项。它将启动浏览器，您可以在代码中设置断点，调试应该可以工作。

关于第二个配置(附加到 Chrome)。港口没什么特别的。为了附加到 Chrome，您需要在配置中指定的端口上启用远程调试的情况下运行 Chrome。例如 chrome.exe --remote-debugging-port=9222 .我个人从不使用这个选项。只要按照上面的三个步骤，你应该没问题。