VS Code通过SSH连接VM调试React应用超时问题求助

核心问题定位 #

VS Code通过SSH连接到VM，但Chrome运行在你的Mac本地，VM无法直接访问Mac的9222远程调试端口，导致调试器连接超时。以下是具体解决步骤：

1. 配置SSH反向端口转发 #

重新建立VS Code到VM的SSH连接时，添加反向端口转发规则，把VM的9223端口映射到Mac本地的9222端口：

ssh -R 9223:localhost:9222 你的VM用户名@VM地址

或者在VS Code的SSH配置文件（.ssh/config）里添加：

Host your-vm
  HostName vm_url
  User your_vm_user
  RemoteForward 9223 localhost:9222

2. 调整VS Code调试配置 #

修改.vscode/launch.json，将调试端口改为VM上转发后的9223，并添加手动发现策略：

{
  "name": "RE-Landing",
  "type": "chrome",
  "request": "attach",
  "webRoot": "${workspaceFolder}",
  "urlFilter": "http://my_vm_url:3009/*",
  "sourceMaps": true,
  "port": 9223,
  "timeout": 30000,
  "targetDiscoveryStrategy": "manual"
}

3. 确保Chrome远程调试正常运行 #

启动Chrome时，除了指定调试端口，建议添加权限相关参数避免连接限制：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --disable-web-security --no-sandbox

启动后在Mac本地访问http://localhost:9222/json，能看到包含http://my_vm_url:3009页面的调试信息，说明Chrome远程调试服务正常。

4. 验证端口转发有效性 #

在VM的终端里执行curl http://localhost:9223/json，如果能返回和Mac本地一致的调试JSON数据，说明端口转发已经生效。

5. 确认Source Map匹配 #

如果调试时无法命中断点，检查React应用的sourceMap配置：

• 若使用create-react-app，默认配置无需修改；
• 若自定义Webpack配置，确保devtool设为source-map或eval-source-map，且output.sourceMapFilename路径与VS Code的webRoot对应。

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