# ❌ NG - Chromeを閉じるまでブロックされる
start "" "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9223 ...
"chrome.exe" ... &

# ✅ OK - run_in_background: true で実行すればブロックされない
"C:/Program Files/Google/Chrome/Application/chrome.exe" --remote-debugging-port=9223 --user-data-dir="C:/Users/numbe/AppData/Local/Temp/chrome-claude-profile"

問題の症状

Windows環境でChrome DevTools MCPサーバーを使用していると、以下のような不安定な動作が発生する：

• MCPサーバーが起動したりしなかったりする
• /doctorコマンドで警告が表示される
• ブラウザ操作ツールが使えないことがある

原因

Windows環境ではnpxコマンドを直接実行できない

Windowsではnpxは実際にはnpx.cmdというバッチファイルとして提供されている。Claude CodeのMCPサーバー設定で"command": "npx"と指定すると、シェルを経由せず直接実行しようとするため失敗することがある。

問題のある設定例

{
  "chrome-devtools": {
    "type": "stdio",
    "command": "npx",
    "args": ["chrome-devtools-mcp@latest"],
    "env": {}
  }
}

/doctorコマンドを実行すると以下の警告が表示される：

[Warning] [chrome-devtools] mcpServers.chrome-devtools: Windows
requires 'cmd /c' wrapper to execute npx

解決方法

方法1: CLIコマンドで設定（⚠️ 非推奨）

# 既存の設定を削除
claude mcp remove chrome-devtools --scope project

# 正しい形式で再追加
claude mcp add chrome-devtools --scope project -- cmd /c npx -y chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222

# 期待する設定
"args": ["/c", "npx", ...]

# 実際に保存される設定（壊れている）
"args": ["C:/", "npx", ...]

方法2: 設定ファイルを直接編集（✅ 推奨）

~/.claude.jsonを直接編集する。

設定ファイルの構造

{
  "projects": {
    "C:\\Users\\username\\project-path": {
      "mcpServers": {
        "chrome-devtools": {
          "type": "stdio",
          "command": "cmd",
          "args": ["/c", "npx", "-y", "chrome-devtools-mcp@latest", "--browserUrl", "http://127.0.0.1:9222"],
          "env": {}
        }
      }
    }
  }
}

ポイント

Chromeの起動方法

Chrome DevTools MCPを使用するには、Chromeをリモートデバッグモードで起動する必要がある：

start "" "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable"

オプションの説明

• --remote-debugging-port=9222: DevToolsプロトコルのポート
• --user-data-dir: 専用のプロファイルディレクトリ（通常のChromeと分離）

確認方法

設定が正しいか確認するには：

claude mcp list

または

/doctor

警告が消えていれば設定完了。

トラブルシューティング

Failed to connect が表示される

1. claude mcp get chrome-devtools で現在の設定を確認
2. args の最初の要素が "/c" ではなく "C:/" になっていないか確認
3. なっている場合は ~/.claude.json を直接編集して修正

設定を修正しても反映されない

• Claude Codeを再起動する（設定ファイルの変更は即座に反映される）
• パスが複数形式で登録されている場合、現在使用中のパスの設定を修正しているか確認

Chromeに接続できない

1. Chromeがリモートデバッグモードで起動しているか確認
2. ポート9222が使用中でないか確認：netstat -an | findstr 9222
3. 既存のChromeプロセスを終了してから再起動

claude mcp listで「No MCP servers configured」と表示される

症状: MCPサーバーを設定済みなのに、claude mcp listで設定なしと表示される。

原因: ~/.claude.jsonに同じプロジェクトが2つのパス形式で登録されている。

{
  "projects": {
    "C:\\Users\\username\\project": { "mcpServers": { /* 設定あり */ } },
    "C:/Users/username/project": { "mcpServers": {} }  // 設定なし
  }
}

Claude Codeが現在認識しているパス形式と、MCPサーバー設定があるパス形式が異なると、設定が見つからない。

解決策:

1. ~/.claude.jsonを開く
2. 同じプロジェクトのエントリが複数ないか確認
3. 両方のパス形式にMCPサーバー設定をコピーする

{
  "projects": {
    "C:\\Users\\username\\project": {
      "mcpServers": {
        "chrome-devtools": {
          "type": "stdio",
          "command": "cmd",
          "args": ["/c", "npx", "-y", "chrome-devtools-mcp@latest", "--browserUrl", "http://127.0.0.1:9223"],
          "env": {}
        }
      }
    },
    "C:/Users/username/project": {
      "mcpServers": {
        "chrome-devtools": {
          "type": "stdio",
          "command": "cmd",
          "args": ["/c", "npx", "-y", "chrome-devtools-mcp@latest", "--browserUrl", "http://127.0.0.1:9223"],
          "env": {}
        }
      }
    }
  }
}

4. Claude Codeを再起動

ログイン済みサイトを操作したい場合

# ❌ NG - "DevTools remote debugging requires a non-default data directory" エラー
"chrome.exe" --remote-debugging-port=9223
"chrome.exe" --remote-debugging-port=9223 --user-data-dir="C:/Users/.../Chrome/User Data" --profile-directory="Profile 1"

解決策: 専用プロファイルでログイン

専用プロファイルで一度ログインすれば、以降はログイン状態が維持される。

1. 専用プロファイルでChromeを起動

# run_in_background: true で実行
"C:/Program Files/Google/Chrome/Application/chrome.exe" --remote-debugging-port=9223 --user-data-dir="C:/Users/numbe/AppData/Local/Temp/chrome-claude-profile"

2. 必要なサイトに手動でログイン（初回のみ）
3. 以降は同じプロファイルでログイン済み状態が維持される

まとめ

関連情報

• Chrome DevTools MCP GitHub
• Claude Code MCP設定ドキュメント