点击VSCode运行按钮后调试器无法附加任何浏览器的问题

问题描述 #

点击VSCode「运行」按钮后，项目可正常构建、运行并启动Chrome/Edge等浏览器，但浏览器提示ERR_CONNECTION_REFUSED错误；VSCode调试窗口同时抛出：

Could not read source map for chrome-error://chromewebdata/: Unexpected 503 response from chrome-error://chromewebdata/neterror.rollup.js.map: Unsupported protocol "chrome-error:"

已尝试删除node_modules、调整DevTools source map设置、修改tsconfig.json、重装VSCode、重建launch.json等方案均无效。当前launch.json配置如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    }, 
  ]
}

针对性解决方案 #

1. 确认本地服务状态，改用Attach模式调试 #

• 先手动在终端执行npm start，打开浏览器访问http://localhost:3000确认服务是否正常响应。若服务未启动，说明调试配置未正确触发服务启动流程。
• 修改launch.json为Attach模式，需先开启Chrome远程调试端口：右键Chrome快捷方式，在「目标」栏末尾添加 --remote-debugging-port=9222，重启Chrome后再执行调试：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "port": 9222
    }
  ]
}

2. 屏蔽chrome-error协议的source map报错 #

在launch.json中添加sourceMapPathOverrides配置，忽略chrome-error相关的source map解析：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "chrome-error://*": "${workspaceFolder}/node_modules/*"
      }
    }
  ]
}

同时确认tsconfig.json中"sourceMap": true，且编译后的js与map文件在同一目录。

3. 排查端口占用问题 #

• 检查3000端口是否被其他进程占用：
  • Windows：执行netstat -ano | findstr :3000
  • macOS/Linux：执行lsof -i :3000
• 若端口被占用，杀死对应进程后重启服务；或修改项目启动端口（如React项目可在package.json的start命令中添加PORT=3001）。

4. 添加预启动任务确保服务就绪 #

配置VSCode在调试前先启动服务并等待编译完成：

1. 修改launch.json，添加preLaunchTask：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "preLaunchTask": "npm: start"
    }
  ]
}

2. 在.vscode/tasks.json中添加任务配置：

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "problemMatcher": {
        "owner": "typescript",
        "fileLocation": "absolute",
        "pattern": {
          "regexp": "^(.*?)(\\((\\d+),(\\d+)\\))?:\\s+(error|warning|info)\\s+(TS\\d+):\\s+(.*)$",
          "file": 1,
          "line": 3,
          "column": 4,
          "severity": 5,
          "code": 6,
          "message": 7
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": ".*Starting the development server.*",
          "endsPattern": ".*Compiled successfully.*"
        }
      }
    }
  ]
}

5. 排查扩展干扰 #

暂时禁用所有VSCode扩展，重启后尝试调试。若恢复正常，再逐个启用扩展排查出干扰插件（尤其注意旧版调试插件、前端工具类扩展）。

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