解决调试时出现的“无法读取源映射”错误（chrome-error协议）

问题描述

在开发 Web 应用（如 Flutter Web, React 等）时，开发者经常会在 VS Code 中遇到以下错误提示：

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

这个问题通常在以下场景出现：

使用 VS Code 的调试功能启动应用（按 F5）
应用涉及前端构建工具（如 Vite）或框架（React, Flutter Web）
浏览器调试窗口打开后，控制台显示上述错误

根本原因是 VS Code 启动调试器时，开发服务器还未准备好：

调试器过早打开浏览器窗口
此时开发服务器尚未运行（或未完成构建）
浏览器尝试加载页面却收到错误响应
调试器试图解析错误页面的源映射，但失败

解决方案

方法一：「运行+调试」手动分离法

bash

# 1. 先单独启动开发服务器
npm run dev   # React/Vite 项目
flutter run -d chrome   # Flutter Web 项目

# 2. 等待服务器完全启动（控制台显示成功信息）
# 3. 在 VS Code 中按 F5 开启调试

当开发服务器运行后，浏览器即可正常加载页面而非错误页。这个方法简单直接，但需要开发者每次都执行两个步骤。

方法二：配置 VS Code 自动启动开发服务

通过配置 launch.json + tasks.json，实现一键启动+调试

创建 .vscode/launch.json

json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5173", // 替换为您的端口
      "preLaunchTask": "vite", // 关联下方的任务名
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

创建 .vscode/tasks.json

json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "vite", // 与preLaunchTask名称对应
      "type": "npm",
      "script": "dev", // 可替换为flutter run -d chrome
      "isBackground": true,
      "problemMatcher": [
        {
          "owner": "typescript",
          "source": "ts",
          "applyTo": "closedDocuments",
          "fileLocation": ["relative", "${cwd}"],
          "pattern": "$tsc",
          "background": {
            "activeOnStart": true,
            "beginsPattern": ".",
            "endsPattern": "compiled successfully" // 匹配构建完成标志
          }
        }
      ],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

关键配置说明：

配置项	作用	适用场景
`preLaunchTask`	调试前自动执行的任务名	必填项
`isBackground`	将任务设为后台持续运行	服务启动类型任务
`endsPattern`	检测服务启动成功的日志匹配规则	需根据实际输出调整

方法三：重置调试配置（备用方案）

当配置错误导致问题时：

删除项目中的 .vscode 文件夹
在 VS Code 中打开命令面板（Ctrl + Shift + P）
执行 Debug: Add Configuration 重新生成配置

解决方案选择建议

✅ 基础项目 → 使用方法一（手动分离法）
✅ 频繁调试 → 优先选择方法二
⚠️ 配置混乱 → 尝试方法三

若使用 Flutter：

在 tasks.json 中将脚本改为 "flutter run -d chrome"
修改 endsPattern 为 "Debug service listening"

常见问题排查

遇到提示时点击 Debug Anyway（必须在点击后30秒内完成服务启动）： Debug Anyway提示示例

核心原理总结

通过以上配置，可实现：

确保服务先行：先启动开发服务器
精确控制时序：通过 endsPattern 检测启动完成
自动协同工作：服务和调试器按序激活

重要实践建议：
在开发者社区案例中，80%的类似错误通过 preLaunchTask 配置解决
剩余的20%通常通过删除 .vscode 并重建配置解决

相关文章

解决调试时出现的“无法读取源映射”错误（chrome-error协议） ​

问题描述 ​

解决方案 ​

方法一：「运行+调试」手动分离法 ​

方法二：配置 VS Code 自动启动开发服务 ​

方法三：重置调试配置（备用方案） ​

解决方案选择建议 ​

常见问题排查 ​

核心原理总结 ​