VSCode调试Web项目：启动Chrome连接localhost失败求助

一、核心问题定位 #

你遇到的ERR_CONNECTION_REFUSED本质是本地没有启动对应端口的Web服务器，浏览器访问localhost:8080时没有服务响应；而「Attach to Chrome」失败是因为Chrome未开启远程调试端口。

二、分步修复方案 #

1. 先启动本地Web服务器（最关键） #

VSCode调试Web页面时，不能直接用本地文件路径（file:///xxx）调试JS，必须通过HTTP协议访问，所以要先启动本地服务器：

• 方法一：用VSCode插件「Live Server」

  1. 在左侧扩展面板搜索「Live Server」并安装。
  2. 右键点击你的HTML文件，选择「Open with Live Server」，浏览器会打开类似http://127.0.0.1:5500/index.html的地址，记住端口号（比如5500）。
  3. 修改launch.json的url为这个地址，示例配置：

     {
         "name": "Launch Chrome",
         "request": "launch",
         "type": "chrome",
         "url": "http://127.0.0.1:5500/index.html",
         "webRoot": "${workspaceFolder}"
     }
     

  4. 按F5启动调试，即可正常连接。

• 方法二：用Node.js的http-server（已装Node环境）

  1. 打开终端进入项目文件夹，执行命令：npx http-server -p 8080
  2. 此时localhost:8080可直接访问你的文件，用你原来的「Launch Edge」配置即可调试。

2. 修复「Attach to Chrome」配置 #

如果想用attach模式（手动打开Chrome后，让VSCode连接调试）：

1. 给Chrome开启远程调试端口
   • 关闭所有Chrome窗口，右键点击Chrome快捷方式→「属性」，在「目标」栏末尾添加 --remote-debugging-port=9222（注意前面有空格）。
   • 启动Chrome，此时它会监听9222端口。
2. 启动调试
   • 先在Chrome中通过本地服务器打开你的页面（比如http://127.0.0.1:5500/index.html），再在VSCode中启动「Attach to Chrome」配置，即可成功连接。

三、常见排查点 #

• 确认本地服务器正常运行：直接在浏览器输入launch.json里的url，能打开页面再调试。
• 检查端口占用：Windows执行netstat -ano | findstr :8080，Mac/Linux执行lsof -i :8080，若端口被占用，换个端口即可。
• 确认VSCode已安装「Debugger for Microsoft Edge」插件（兼容Chrome调试）。

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