无法通过附加到 Chrome 在 VS Code 中进行调试 [英] Cannot debug in VS Code by attaching to Chrome

问题描述

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

I have default config in launch.json. The site runs on port 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}"
        }
    ]
}

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

However, when I click on the Debug button, I get this error:

无法连接目标:connect ECONNREFUSED 127.0.0.1:9222

Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222

问题一:为什么VS Code在创建这个json的时候会分配9222端口?

这个端口有什么特别之处，以至于 MS 决定把它放在这个 launch.json 中?

What is so special about this port that MS decided to put it in this launch.json?

问题 2:我需要改变什么才能使事情正常进行?

启动调试总是会启动一个新窗口.我要专门询问附加调试选项，以便它会在新选项卡中打开.

The Launch debug always launches a new window. I am asking specifically about Attach debug option, so that it will open in a new tab instead.

推荐答案

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

1. You need to install Debugger for Chrome extension for this to work. Open extensions in VS Code and search for Debugger for Chrome

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

You need to run a web server on the URL specified in the first configuration (default to http://localhost:8080). I use serve npm package that I installed globally. From my app folder I run serve -p 8080

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

Select Launch Chrome against localhost option. It will launch the browser and you can set breakpoints in your code and the debugging should work.

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

Regarding the second configuration (Attach to Chrome). There's nothing special about the port. In order to attach to Chrome you need to run Chrome with remote debugging enabled on port specified in the config. For example chrome.exe --remote-debugging-port=9222. I personally never use this options. Just follow the three steps above and you should be fine.

这篇关于无法通过附加到 Chrome 在 VS Code 中进行调试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！