如何用VS Code调试由Visual Studio启动的Chrome中的Web客户端代码

核心思路 #

要实现VS Code调试器与Visual Studio启动的Chrome实例连通，关键是让Chrome以远程调试模式启动（指定固定调试端口），同时让后端服务与该Chrome实例关联。

方法1：手动启动带调试端口的Chrome，关联Visual Studio后端服务 #

• 关闭所有Chrome实例（包括后台进程）
• 打开命令提示符（cmd），执行命令启动调试模式的Chrome：

  chrome.exe --remote-debugging-port=9222
  

• 在Visual Studio中启动后端项目，取消自动打开浏览器的设置（或直接阻止VS自动弹窗）
• 复制VS输出窗口中的后端服务URL（如https://localhost:44300），粘贴到刚启动的Chrome中打开
• 在VS Code中配置launch.json，添加以下调试配置：

  {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "url": "https://localhost:44300/*",
      "webRoot": "${workspaceFolder}/src"
  }
  

  注意替换url中的端口和webRoot为你的实际项目路径
• 启动VS Code调试器，即可成功连接目标Chrome实例

方法2：修改Visual Studio项目调试配置（适配ASP.NET类项目） #

• 右键Web项目 → 属性 → 切换到调试选项卡
• 取消勾选「启动浏览器」选项，保存设置
• 按照方法1的步骤启动带调试端口的Chrome，手动打开后端服务URL
• 配置VS Code的launch.json，使用attach模式完成连接

方法3：通过注册表设置Chrome默认带调试端口启动（永久生效） #

• 打开注册表编辑器（regedit），定位到路径：

  HKEY_CLASSES_ROOT\ChromeHTML\shell\open\command
  

• 修改默认值，在末尾追加 --remote-debugging-port=9222，修改后的值示例：

  "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 -- "%1"
  

• 重启Visual Studio，此后VS启动的Chrome都会默认开启调试端口
• 配置VS Code的launch.json，通过attach模式连接9222端口即可

注意事项：

• 调试前需确保没有其他Chrome实例占用9222端口
• 若使用HTTPS本地服务，VS Code调试时需按提示信任本地证书

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