Dev Solve

Flutterアプリで発生する「Could not read source map for chrome-error://chromewebdata/」エラーの解決方法

問題の概要

FlutterアプリをChromeブラウザで実行しようとすると、以下のエラーが発生します：

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

このエラーによりアプリがChromeで起動しなくなります。主にVisual Studio Codeでデバッグ実行時（F5キー）に発生し、フロントエンド開発環境特有の問題です。

１．基本解決法：手動でのサーバー起動＋デバッグ実行

最も簡単で効果的な解決法です：

ターミナルで開発サーバーを起動
bash
```
npm start  # または `yarn start`
```
Visual Studio Codeでデバッグ実行
F5キーまたはデバッグボタンをクリック

注意点

npm startはプロジェクトのフロントエンドサーバーを起動します
Flutterプロジェクトの場合、代わりに flutter run -d chrome を使用するケースも

２．発展的解決法：VS Codeの自動化設定

手動操作を自動化したい場合の方法：

.vscode/launch.json に設定追加

json

{
  "version": "0.2.0",
  "configurations": [
    {
      "preLaunchTask": "npm: dev",
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome"
    }
  ]
}

.vscode/tasks.json の作成（必要な場合）

json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "npm: dev",
      "type": "npm",
      "script": "dev",
      "isBackground": true,
      "problemMatcher": [
        {
          "owner": "typescript",
          "pattern": "$tsc",
          "background": {
            "activeOnStart": true,
            "endsPattern": "vite dev server running"
          }
        }
      ]
    }
  ]
}

設定のポイント

preLaunchTask: デバッグ前に実行するタスク名
isBackground: サーバーを継続実行する設定
フレームワークに応じ script を変更（例："dev" → "start"）

エラーの根本原因

このエラーは以下の組み合わせで発生します：

Chromeのデバッグ機能がソースマップを要求
開発サーバーが未起動の状態でデバッグ実行
Chromeがエラーページ用スクリプト（chrome-error://...）を参照しようとする
特殊プロトコルchrome-error:に対しソースマップ要求が失敗

推奨ワークフローの概要

解決の核心は：
開発サーバーとデバッグセッションの起動順序の同期にあります。上記の解決法はいずれもこれを実現します。

避けるべき誤った対処法

以下の方法は効果がなく、状況を悪化させる可能性があります：

.vscodeフォルダの削除（デバッグ設定が失われます）
Chromeの閲覧データクリア（根本原因と無関係）
VSCodeの再インストール

問題が解決しない場合はプロジェクトの依存関係を更新：

bash

flutter clean
flutter pub get

関連記事

Flutterアプリで発生する「Could not read source map for chrome-error://chromewebdata/」エラーの解決方法 ​

１．基本解決法：手動でのサーバー起動＋デバッグ実行 ​

２．発展的解決法：VS Codeの自動化設定 ​

エラーの根本原因 ​