これは何？
claude code で chrome-devtools-mcp を入れて使ってみようとしたら、Connection failed エラーが出てしまい使用できない現象を解決した時のメモです
環境
macOS sequoia 15.6.1
エラー内容
[DEBUG] MCP server "chrome-devtools": Connection failed: McpError: MCP error -32000: Connection closed
claude --debug
[DEBUG] MCP server "chrome-devtools": Connection failed: McpError: MCP error -32000: Connection closed
[DEBUG] MCP server "chrome-devtools": Error message: MCP error -32000: Connection closed
[DEBUG] MCP server "chrome-devtools": Error stack: McpError: MCP error -32000: Connection closed
at Wl1._onclose (file:///Users/xxxxx/.volta/tools/image/packages/@anthropic-ai/claude-code/lib/node_modules/@anthropic-ai/claude-code/cli.js:1319:12595)
at _transport.onclose (file:///Users/xxxxx/.volta/tools/image/packages/@anthropic-ai/claude-code/lib/node_modules/@anthropic-ai/claude-code/cli.js:1319:12095)
at ChildProcess.<anonymous> (file:///Users/xxxxx/.volta/tools/image/packages/@anthropic-ai/claude-code/lib/node_modules/@anthropic-ai/claude-code/cli.js:1321:1444)
at ChildProcess.emit (node:events:519:28)
at ChildProcess.emit (node:domain:488:12)
at maybeClose (node:internal/child_process:1105:16)
at ChildProcess._handle.onexit (node:internal/child_process:305:5)
[ERROR] MCP server "chrome-devtools" Connection failed: MCP error -32000: Connection closed
結論から
nodeバージョンと、claude codeのバージョンがそれぞれ古かった様子。
それぞれアップデートしたところ、動くようになった。
変更前は、以下のバージョンを使っていた。
- node 20.13.1 (volta環境で管理）
- claude code 1.0.29
解決までにやったこと
以下にnodeバージョンを上げたら解決したという情報を見つけたので、試すことにした。
volta環境のnodeのアップデート
以下を参考に、volta環境のデフォルトのnodeバージョンを更新した。
volta install node@22.20.0
更新確認
node --version v22.20.0
しかし、これだけでは解決しなかった...。
Claude Code のアップデート
Claude Code のバージョンも古かったので、これも原因では？と考えてバージョンを上げることにした。
しかし通常の手順でアップデートしようとしたところ、うまくアップデートできなかった。
調べたところ、volta でnode環境を管理していると、アップデートが反映されないという情報を発見したので、以下を参考にアップデートした。
Claude Codeを起動して、/migrate-installerを実行。
claude
/migrate-installer
claude のパスを通してバージョン確認
rm /Users/name/.volta/bin/claude
echo 'export PATH="$HOME/.claude/local:$PATH"' >> ~/.zshrc
source ~/.zshrc
claude -v
2.0.21 (Claude Code)
mcpを再度インストール
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
#プロジェクトまたいだインストールなら以下
claude mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest
動作確認
claude
#起動後以下コマンド実行
> /mcp
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ Manage MCP servers │
│ │
│ ❯ 1. chrome-devtools ✔ connected · Enter to view details ...
connected とあるので接続できている様子。
公式レポジトリのサンプルプロンプト投げてみる。
Check the performance of https://developers.chrome.com
ブラウザが開き、接続できた。
分析結果も表示された。
⏺ chrome-devtools - navigate_page (MCP)(url: "https://developers.chrome.com")
⎿ # navigate_page response
## Pages
0: https://developer.chrome.com/?hl=ja [selected]
⏺ chrome-devtools - performance_start_trace (MCP)(reload: true, autoStop: true)
⎿ # performance_start_trace response
The performance trace has been stopped.
## Summary of Performance trace findings:
… +116 lines (ctrl+o to expand)
⏺ パフォーマンストレースが完了しました。
📊 パフォーマンス測定結果
URL: https://developer.chrome.com/?hl=ja
Core Web Vitals
- LCP (Largest Contentful Paint): 617 ms ✅ (良好 - 2.5秒未満)
- TTFB: 427 ms
- Render delay: 189 ms
- CLS (Cumulative Layout Shift): 0.02 ✅ (良好 - 0.1未満)
- FID/INP: データなし（今回のトレースでは未測定）
主な発見事項
1. LCP Breakdown - LCPの内訳
- リソース読み込みよりも遅延時間が大きい可能性があります
2. CLSCulprits - レイアウトシフトの原因
- ページ読み込み中に要素が移動している箇所があります
3. RenderBlocking - レンダリングブロック
- 初期レンダリングをブロックするリクエストが存在します
4. NetworkDependencyTree - ネットワーク依存関係
- クリティカルリクエストチェーンの最適化余地があります
5. ThirdParties - サードパーティスクリプト
- サードパーティコードが読み込みパフォーマンスに影響しています
6. Cache - キャッシュ
- キャッシュ戦略の改善余地があります（11 Bの無駄）
総評
全体的に非常に良好なパフォーマンスです。LCPが617msと高速で、CLSも0.02と極めて低い値を示しています。細かい最適化の余地はありますが
、ユーザー体験の観点では優れたパフォーマンスです。
詳細な分析が必要な項目があれば、お知らせください。
まとめ
バージョンが古いことが原因だったかは定かではないが、解決したのでよしとします。