无法通过附加到Chrome在VSCode中进行调试

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}"
        }
    ]
}

但是,当我单击调试按钮时,我收到此错误:

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

问题1:为什么VSCode在创建这个json时分配端口9222

这个端口有什么特别之处,MS决定把它放在这个launch.json中？

问题2:我需要改变什么来使事情有效.

Launch调试始终启动一个新窗口.我特别询问附加调试选项,以便它将在新选项卡中打开.

谢谢.

Answer 1

1. 您需要安装Debugger for Chrome扩展程序才能生效.在VS Code中打开扩展程序并搜索适用于Chrome的调试程序

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

3. 选择针对localhost选项启动Chrome.它将启动浏览器,您可以在代码中设置断点,调试应该有效.

关于第二种配置(附加到Chrome).港口没有什么特别之处.要附加到Chrome,您需要在配置中指定的端口上启用启用远程调试的Chrome.例如chrome.exe --remote-debugging-port=9222.我个人从不使用这个选项.按照上面的三个步骤,你应该没事.

Answer 2

使用配置时url,vscode将搜索带有EXACT URL的选项卡,如果找到则附加到该选项卡.

使用urlFilter可以包含通配符(如*)的配置将调试器附加到网址中的任何子路由.

例如 "urlFilter": "http://localhost:4200/*"

完整的准确步骤:

1. 配置你的lanch.json文件看起来像这样:

   {
     "version": "0.2.0",
     "configurations": [
       {
         "type": "chrome",
         "request": "attach",
         "name": "Attach to Chrome",
         "port": 9222,
         "urlFilter": "http://localhost:4200/*",
         "webRoot": "${workspaceFolder}"
       }
     ]
   }
   

2. 关闭所有打开的chrome实例(确保使用Windows中的任务管理器杀死所有这些实例).

3. 带有以下参数的Lunch chrome: - remote-debugging-port = 9222

   确保此参数中的端口与lunch.json文件中的attache to chrome配置的"port"属性中配置的端口相同(如上例所示)

4. 导航到您的网站.在此示例中为http:// localhost:4200

5. 在vscode中运行"开始调试".

Answer 3

在使用VSCode中的"附加到Chrome"配置寻求帮助时,我遇到了这个问题.虽然接受的答案确实给了我一些提示,但我确实需要做更多的挖掘.以下是对我有用的步骤,以防其他人发现它们有用:

1. 在VSCode中安装适用于Chrome扩展的Debugger
2. 使用您选择的Web服务器提供文件
3. 启用Chrome并启用远程调试
4. 在这个新的Chrome窗口中,导航到您的Web服务器托管的URL(例如,http:// localhost:8080).

5. 在VSCode中,向launch.json文件添加如下所示的配置:

   "configurations": [
     {
       "type": "chrome",
       "request": "attach",
       "port": 9222,
       "name": "Attach Chrome",
       "url": "http://localhost:8080/",
       "webRoot": "${workspaceFolder}"
     }
   ]
   

6. 按下VSCode中的播放按钮,从下拉列表中选择"附加到Chrome"选项.

配置文件中需要的关键是url字段.这需要是托管文件的网址,此网址目前需要在您刚启动远程调试时启动的Chrome窗口中打开.如果您输入除此字段之外的所有其他内容,VSCode将向您显示一条错误消息,指出哪些网址可用.就像是Cannot connect to runtime process, timeout after 10000 ms - (reason: Can't find a valid target that matches: localhost:8080/. Available pages: ["http://localhost:8080",...

为了完整起见,以下是启用远程调试启动Chrome的方法(来自Debugger for Chrome README):

视窗:

• 右键单击Chrome快捷方式,然后选择属性
• 在"目标"字段中,追加 --remote-debugging-port=9222
• 或者在命令提示符下执行 <path to chrome>/chrome.exe --remote-debugging-port=9222

苹果系统:

• 在终端中,执行 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux的:

• 在终端中,启动 google-chrome --remote-debugging-port=9222

Answer 4

2020 年的补充答案...

VS Code 有一个新的调试，它尚不稳定，但目前在 Insiders 版本上作为默认值工作。

它会自动打开一个新的 Chrome 实例，并带有以下设置的调试：

{
  "name": "Attach to Chrome",
  "port": 9222,
  "request": "attach",
  "type": "pwa-chrome",
  "webRoot": "${workspaceFolder}/src"
 }

像任何附件一样，您可以随时在 VS Code 打开的这个新窗口中运行调试。或者，您可以之前将 Chrome 作为调试模式运行，以避免 VS 代码打开一个新的调试窗口，就像@quicklikerabbit 回答/sf/answers/3597449971/ 一样，但这次不需要 URL 参数。

Answer 5

以下过程适用于create-react-app创建的 React 应用程序：

1. 单击活动栏中的“扩展”按钮，然后安装“Chrome 调试器”扩展（如果尚未安装）。

2. 打开一个新的终端窗口。cd如有必要，到客户端文件夹并安装chrome-launcher：

   npm install chrome-launcher
   

3. 切换到侧栏中的“调试器”面板。

4. 单击侧栏顶部的“配置”下拉列表，然后选择“添加配置...”或者，按侧栏顶部的小齿轮图标将其打开launch.json，然后按标有“添加配置”的蓝色大按钮。 ..”

5. 从配置模板列表中，选择Chrome: Attach。应添加以下配置launch.json：

   npm install chrome-launcher
   

   无需更改此配置中的任何内容。

6. 将一个名为以下内​​容的新文件添加.env到项目的根文件夹中（如果是全栈应用程序，则添加到客户端文件夹的根目录中）：

   BROWSER=launchChrome.js
   

7. 添加一个名为launchChrome.js同一文件夹的新文件，其中包含以下内容：

   {
       "name": "Attach to Chrome",
       "port": 9222,
       "request": "attach",
       "type": "pwa-chrome",
       "webRoot": "${workspaceFolder}"
   },
   

8. 从终端窗口启动 React 应用程序：

   npm start
   

9. 几秒钟后，您应该看到以下文本：

   Starting the development server...
   
   Chrome remote debugging port: 9222
   

10. 在侧面板顶部，选择配置Attach to Chrome并按绿色三角形。

11. 现在，您可以在 React 代码中放置断点，调试器将在遇到断点时中断。Node.js: Launch Program您甚至可以通过添加配置来同时调试服务器和客户端launch.json。