Chrome DevTools MCP Server
Chrome DevTools MCPサーバーでClaude連携・ブラウザの実行解析と性能計測を自動化
npx chrome-devtools-mcp@latest概要
Chrome DevTools MCP Serverの設定方法と使い方。
Google公式のChrome DevToolsをClaudeから操作できるMCPサーバー。
実機Chromeブラウザの起動・ページ操作・パフォーマンストレース取得・ネットワーク解析・コンソールログ確認・スクリーンショット撮影が可能。
ClaudeとChrome DevToolsのMCPサーバー連携により、Webアプリのデバッグやパフォーマンス計測の作業を自動化できる。
Puppeteerベースで動作するためアクション完了を自動的に待機する仕組みも備えている。
設定方法はnpx経由でclaude mcp addコマンドを実行するだけでシンプルに完結する。
料金・APIキー情報
料金
完全無料APIキー
🔓 不要✅このMCPはAPIキー不要です。別途セットアップが必要な場合があります（上記参照）。
こんな使い方ができます
Webページの読み込みパフォーマンスをClaudeに計測させて改善ポイントを抽出できる
実機Chromeでフォーム送信や操作を再現してClaudeにバグの原因を特定させられる
ネットワークリクエストやコンソールログをClaudeに解析させて問題箇所を見つけられる
ページのスクリーンショットを撮影してClaudeにUI崩れを発見させられる
セットアップ手順
- 1
Node.js（v20.19以上）と最新のChromeがインストールされていることを確認する
- 2
ターミナルで以下を実行してClaude Codeに追加する：claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
設定ファイル
コピー前に確認
Node.js v20.19以上、Chrome安定版以上が必要。APIキー・アカウント不要。
claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest注意事項
ブラウザ内のページ内容にアクセスできるため、機密情報を含むページではClaudeへの公開範囲に注意すること。Google CrUX APIへトレースURLを送信して実ユーザー体感データを取得する仕組みがあり、--no-performance-cruxフラグで無効化できる。