Chrome DevTools MCP Server (Official)

Chrome DevTools MCP Server (Official) とは？

Chrome DevTools MCP は Google 公式の MCP サーバー（chrome-devtools-mcp）で、Claude、Cursor、Copilot、Gemini などのコーディングエージェントが実際に動いている Chrome ブラウザーを操作・検査し、自動化、デバッグ、パフォーマンス分析を行えるようにします。

このプロジェクトは Chrome DevTools チームが ChromeDevTools/chrome-devtools-mcp リポジトリで Apache-2.0 ライセンスのもとメンテナンスしています。Chrome の操作には Puppeteer を、トレースの記録とパフォーマンスインサイトの抽出には DevTools フロントエンドを使います。stdio でローカル実行され、無料で、API キーも不要です。MCP なしで使える CLI も提供されています。

Chrome DevTools MCP Server (Official) の使い方

前提条件：

• Node.js LTS（npm パッケージの宣言は ^20.19.0 || ^22.12.0 || >=23）
• Google Chrome の現行安定版以降（Chrome for Testing もサポート）
• npm

MCP クライアントに標準設定を追加します：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

基本的なブラウザー操作だけでよい場合は、3 つのツール（ナビゲーション、スクリプト実行、スクリーンショット）だけを公開する slim モードを使えます：

"args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]

ブラウザーを必要とするツールが初めて呼ばれたときに、サーバーが Chrome を自動で起動します。動作確認には「Check the performance of https://developers.chrome.com」というプロンプトを試してください。

Claude Code

MCP サーバーのみをインストールする場合：

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

MCP サーバーと skills をまとめたプラグインとしてインストールする場合：

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

インストール後に Claude Code を再起動します。以前に手動でインストールしていた場合は、先に削除してください。

Claude Desktop

公式のクライアントガイドには Claude Desktop の個別手順はありません。claude_desktop_config.json は同じ mcpServers 形式なので、上記の標準設定を貼り付けてアプリを再起動します。

Cursor

README のワンクリックインストールボタンを使うか、Cursor Settings -> MCP -> New MCP Server を開いて標準設定を入力します。

VS Code

推奨はエージェントプラグインとしての導入です。コマンドパレットで Chat: Install Plugin From Source を実行し、ChromeDevTools/chrome-devtools-mcp を貼り付けます。macOS または Linux で MCP サーバーのみを追加する場合：

code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'

Codex

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

公式クライアントガイドでは、Gemini CLI（gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest）、Windsurf、Cline、JetBrains、Kiro、Warp、OpenCode なども扱っています。

自分の Chrome に接続する

デフォルトでは、専用プロファイルで新しい Chrome インスタンスが起動します。すでにログイン済みのブラウザーを使いたい場合は、chrome://inspect/#remote-debugging でリモートデバッグを有効にして（Chrome 144 以降）--autoConnect を追加するか、デバッグポート付きで Chrome を起動して --browser-url=http://127.0.0.1:9222 を渡します。

Chrome DevTools MCP Server (Official) の主な機能

• パフォーマンスインサイト：DevTools のトレースを記録し、Core Web Vitals（LCP、INP、CLS）を含む具体的な改善点を返します。
• 実ブラウザーでのデバッグ：ネットワークリクエスト、ソースマップ済みスタックトレース付きのコンソールメッセージ、スクリーンショット、アクセシビリティツリーのスナップショット。
• 信頼性の高い自動化：Puppeteer ベースのクリック、入力、フォーム入力で、操作結果を自動的に待機します。
• Lighthouse 監査：アクセシビリティ、SEO、ベストプラクティスのスコアと、不合格の DOM ノード。
• メモリデバッグ：ヒープスナップショットでメモリリークを調査します。
• デバイスエミュレーション：ネットワークと CPU のスロットリング、モバイルビューポート、ダークモード、位置情報、ユーザーエージェントのエミュレーション。
• 柔軟な構成：--slim、--headless、--isolated、カテゴリ単位のツール切り替え、URL の許可・ブロックリスト。
• 公式かつ継続的にメンテナンス：Chrome DevTools チームが開発し、頻繁にリリースされています。

Chrome DevTools MCP Server (Official) のツール

• 入力の自動化：click、fill、fill_form、type_text、press_key、hover、drag、upload_file、handle_dialog が、ページスナップショットで識別された要素を操作します。
• ナビゲーション：new_page、navigate_page、list_pages、select_page、close_page、wait_for でタブとページ読み込みを管理します。
• パフォーマンス：performance_start_trace、performance_stop_trace、performance_analyze_insight でトレースを記録し、個々のインサイトを掘り下げます。
• ネットワークとデバッグ：list_network_requests、get_network_request、list_console_messages、evaluate_script、get_css_styles、lighthouse_audit、take_screenshot、take_snapshot。
• エミュレーション：emulate と resize_page。
• メモリ：take_heapsnapshot。より詳しいヒープ分析ツールには --memoryDebugging=true が必要です。
• オプトインのカテゴリ：Chrome 拡張機能ツール（--categoryExtensions=true）、プログレッシブウェブアプリのツール（--categoryPwa=true）、実験的な WebMCP ツール。

Chrome DevTools MCP Server (Official) のユースケース

• 実ブラウザーでコード変更を確認：「localhost:3000 を開いてサインアップフォームを送信し、コンソールに何が出たか教えて。」
• 遅いページの診断：「このページのパフォーマンストレースを記録して、LCP が遅い理由を説明して。」
• 失敗する API 呼び出しのデバッグ：「ログイン後のネットワークリクエストを一覧にして、500 を返したリクエストのレスポンスを見せて。」
• レイアウト崩れの修正：「幅 375px でスクリーンショットを撮って、ヘッダーがはみ出す原因を調べて。」
• 監査の実行：「アクセシビリティと SEO の Lighthouse 監査を実行して、不合格の要素を一覧にして。」
• ヒープスナップショットを取得・比較してメモリリークを探します。

Chrome DevTools MCP Server (Official) と代替ツールの比較

• Playwright MCP Server は Microsoft のブラウザー自動化サーバーで、Chromium、Firefox、WebKit に対応し、アクセシビリティスナップショットによる自動化に重点を置いています。Chrome DevTools MCP は Chrome 専用ですが、DevTools レベルのパフォーマンストレース、Lighthouse 監査、ヒープスナップショットが加わります。
• Puppeteer MCP Server は基本的な Puppeteer 自動化のための以前からあるリファレンスサーバーです。Chrome DevTools MCP も Puppeteer をベースにしており、Chrome チームが積極的にメンテナンスしている選択肢です。
• BrowserTools MCP Server は Chrome 拡張機能を通じてブラウザーのログを読み取るコミュニティプロジェクトです。Chrome DevTools MCP は拡張機能が不要で、--autoConnect で自分の Chrome に接続できます。

Chrome DevTools MCP Server (Official) のトラブルシューティング

• サーバーが起動しない：ターミナルで npx chrome-devtools-mcp@latest --help を実行し、クライアントがターミナルと同じ Node と npm のバージョンを使っているか確認します。
• ERR_MODULE_NOT_FOUND：多くの場合、サポート外の Node バージョンか npx キャッシュの破損が原因です。rm -rf ~/.npm/_npx と npm cache clean --force でキャッシュを消去して再インストールします。
• Target closed エラー：ブラウザーを起動できませんでした。実行中の Chrome インスタンスを閉じ、最新の安定版 Chrome をインストールします。
• Windows 10 で「MCP error -32000: Connection closed」："command": "cmd" と "args": ["/c", "npx", "-y", "chrome-devtools-mcp@latest"] を使うか、npx の絶対パスを指定します。
• コンテナと CI：Chrome は root では起動しません。サーバーは非 root ユーザーで実行してください。