如何将VS Code调试器附加到Chrome标签页？配置失败求助

你的配置无法正常工作，核心原因是Chrome未启用远程调试模式，且配置中缺少必要的端口参数。按以下步骤修复：

1. 以远程调试模式启动Chrome #

启动Chrome时必须指定远程调试端口，否则调试器无法连接：

• Windows：右键Chrome快捷方式 → 属性 → 在「目标」栏末尾添加 --remote-debugging-port=9222（注意前面有空格），点击确定后重启Chrome。
• macOS：打开终端，执行命令：

  open -a "Google Chrome" --args --remote-debugging-port=9222
  

• Linux：打开终端，执行命令：

  google-chrome --remote-debugging-port=9222
  

2. 更新launch.json配置 #

在原配置中添加port参数，确保与启动Chrome时指定的端口一致：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Chrome",
            "type": "chrome",
            "request": "attach",
            "url": "https://en.wikipedia.org/wiki/A",
            "port": 9222
        }
    ]
}

如果调试本地项目，可额外添加webRoot参数指向项目根目录（远程页面无需此配置）。

3. 验证远程调试状态 #

打开Chrome新标签页，访问chrome://inspect，在「Remote Target」区域能看到已打开的标签页，说明远程调试模式已成功启用。

关键注意事项 #

• 要调试的标签页必须在开启远程调试的Chrome实例中打开，不能单独启动新的Chrome窗口。
• 如果端口9222被占用，可更换为其他未被占用的端口（如9223），确保启动命令和launch.json中的端口保持一致。

内容的提问来源于stack exchange，提问作者Malix