VSCode+Chrome调试JS时无法连接localhost:9222求助

以下是针对你的问题的具体排查和解决步骤：

• 确保Chrome以调试端口正确启动
  完全关闭所有Chrome窗口（包括后台运行的chrome.exe进程，可通过任务管理器结束），再通过以下方式启动：

  • 命令行执行：chrome.exe --remote-debugging-port=9222
  • 或修改Chrome快捷方式：右键快捷方式→属性→目标栏末尾添加 --remote-debugging-port=9222（注意参数前有空格），双击快捷方式启动Chrome。

• 验证9222端口是否被监听
  打开命令提示符，执行：

  netstat -ano | findstr :9222
  

  如果输出中没有Chrome的进程ID，说明调试端口未成功启用，需重新检查启动参数。

• 优化launch.json的Attach配置
  你的Attach配置缺少urlFilter，无法匹配Live Server的页面地址（localhost:5500），修改后配置如下：

  {
      "name": "Attach to Chrome",
      "port": 9222,
      "request": "attach",
      "type": "chrome",
      "webRoot": "${workspaceFolder}",
      "urlFilter": "http://localhost:5500/*"
  }
  

  添加urlFilter后，调试器会精准匹配Live Server的页面，避免找不到目标。

• 确认Live Server已启动并打开页面
  启动Live Server后，确保Chrome中已经打开了http://localhost:5500的页面，Attach模式需要目标页面已在调试端口启动的Chrome中打开。

• 排查端口拦截问题
  暂时关闭系统防火墙或第三方安全软件，检查是否是它们拦截了9222端口的连接。

另外，你也可以直接使用launch.json中的「Launch Chrome against localhost」配置，该模式会自动启动Chrome并打开Live Server地址，无需手动配置Chrome启动参数，操作更简便。

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