Chrome DevTools MCP：AI駆動のブラウザ自動化

AIアシスタントに「ログインフォームが機能するかテストして」または「ホームページのスクリーンショットを撮って」と伝えるだけで、それを実行してくれると想像してみてください。Puppeteerスクリプトを書く必要も、CSSセレクタをデバッグする必要もありません。

Chrome DevTools MCPはこれを可能にします。これはGoogleの公式MCPサーバーで、AIエージェントをChromeブラウザのDevToolsに接続し、対話型ブラウザ自動化を実現します。

2026年11月4日更新： 公式リポジトリに照らして訂正しました。npmパッケージ名は@chromedevtools/chrome-devtools-mcpではなくchrome-devtools-mcpです。Claude Codeに--scope globalはなく（--scope userを使います）、userスコープとlocalスコープのサーバーは~/.claude/.mcp.jsonではなく~/.claude.jsonに保存されます。ツール名も実際の名前（click、fill、evaluate_script、take_snapshot、wait_for）に改め、要素はCSSセレクタではなくページスナップショットのuidで指定する形に直しました。Node.jsの要件もあわせて修正しています。

Chrome DevTools MCPとは？

Chrome DevTools MCPは、AIモデルと実際のChromeブラウザインスタンス間のブリッジとして機能する専門的なMCPサーバーで、信頼性の高い自動化のためにPuppeteerを使用しています。

仕組み

あなた（自然言語）
  ↓
Claude（MCPクライアント）
  ↓
Chrome DevTools MCP Server
  ↓
Puppeteer（自動化ライブラリ）
  ↓
Chromeブラウザ（Chrome DevTools Protocol経由）

重要なポイント：Puppeteerスクリプトを書く代わりに、何をしたいかを自然言語で説明すると、AIが技術的な詳細を処理します。

主要機能

高レベルツール 🛠️
- navigate_page - 任意のURLに移動
- take_snapshot - ページをテキストで取得し、各要素にuidを付与
- click - ボタン、リンクなどをクリック
- fill - フォームの入力欄に入力
- take_screenshot - ページのビジュアルをキャプチャ
- list_console_messages - コンソールログを表示
- evaluate_script - JavaScriptを実行
Puppeteer駆動 🤖
- 実戦でテストされたChrome自動化
- 自動待機（ページロード、DOM準備完了）
- 複雑なインタラクションを確実に処理
DevTools統合 🔍
- Chrome DevTools Protocol (CDP)にアクセス
- ネットワークリクエストを検査
- JavaScriptエラーをデバッグ
- パフォーマンスを監視
対話型自動化 💬
- 自然言語コマンド
- AIがページスナップショットから要素を特定
- スクリプティング不要

インストールとセットアップ

前提条件

Google Chromeの現行安定版以降（Chrome for Testingも可。その他のChromium系ブラウザは公式サポート外）
現行のNode.js LTS（パッケージは20系ならv20.19以降、22系ならv22.12以降、およびv23以降に対応）
npm

方法1：公式CLI（推奨）

# すべてのプロジェクトにインストール（userスコープ）
claude mcp add \
  --scope user \
  chrome-devtools \
  -- npx -y chrome-devtools-mcp@latest

@latestを付けると、npxはサーバーの最新リリースを起動します。

方法2：手動設定

プロジェクトルートの.mcp.json（projectスコープ）を編集します。userスコープとlocalスコープのサーバーはClaude Codeが管理する~/.claude.jsonに保存されるため、そちらはclaude mcp addで追加してください：

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

実際の使用例

例1：自動テスト

あなた：「https://myapp.com のログインフローをテストして：
1. サイトに移動
2. ログインボタンをクリック
3. ユーザー名とパスワードを入力
4. フォームを送信
5. /dashboard にリダイレクトされたか確認」

Chrome DevTools MCPが実行：
1. navigate_page({ url: "https://myapp.com" })
2. take_snapshot() → ページの要素を一覧（各要素にuid）
3. click({ uid: "<ログインボタン>" })
4. take_snapshot() → フォームの入力欄を特定
5. fill({ uid: "<ユーザー名欄>", value: "testuser" })
6. fill({ uid: "<パスワード欄>", value: "testpass123" })
7. click({ uid: "<送信ボタン>" })
8. 返答：成功 - /dashboard にリダイレクトされました

結果：自然言語で完全なE2Eテスト

例2：ビジュアルリグレッションテスト

あなた：「https://mysite.com を異なる画面サイズでスクリーンショット：
デスクトップ (1920x1080)、タブレット (768x1024)、モバイル (375x667)」

Chrome DevTools MCPが実行：
1. ビューポート1920x1080に設定 → desktop.pngとしてスクリーンショット
2. ビューポート768x1024に設定 → tablet.pngとしてスクリーンショット
3. ビューポート375x667に設定 → mobile.pngとしてスクリーンショット

結果：ビジュアル比較用の3つのスクリーンショット

例3：パフォーマンスデバッグ

あなた：「https://myapp.com を読み込んで教えて：
- 読み込みにどのくらい時間がかかるか？
- コンソールエラーはあるか？
- Largest Contentful Paint (LCP) は？」

Chrome DevTools MCPが実行：
1. navigate_page({ url: "https://myapp.com" })
2. performance_start_trace({ reload: true, autoStop: true }) → LCPなどのCore Web Vitalsを含むトレースを取得
3. list_console_messages()（エラーをチェック）

返答：
- 読み込み時間：2.3秒
- エラー：なし
- LCP：1.8秒（良好）

利用可能なツール

以下はコアツールです。そのほかのツール（エミュレーション、ネットワーク、パフォーマンス、Lighthouse、メモリなど）はツールリファレンスを参照してください。要素を操作するツールは最新のtake_snapshotにある要素のuidを使い、ページ単位のツールはlist_pagesが示すpageIdも受け取ります。

1. `navigate_page(url, timeout)` - URLに移動

2. `click(uid)` - 要素をクリック

3. `fill(uid, value)` - 入力欄に入力、または`<select>`の選択肢を選ぶ

4. `take_screenshot(options)` - スクリーンショット

5. `list_console_messages()` - コンソールメッセージをリスト

6. `evaluate_script(function)` - ページ内でJavaScript関数を実行

7. `take_snapshot()` - アクセシビリティツリーに基づく、要素の`uid`付きテキストスナップショットを取得

8. `wait_for(text, timeout)` - 指定したテキストが表示されるまで待機

ベストプラクティス

✅ 推奨

evaluate_scriptのコードではセマンティックセレクタを使用 - 複雑なCSSよりdata-testidを優先
動的コンテンツを待つ - SPA/AJAX重視のサイトではwait_for（テキストの出現を待つ）を使用
エラーを優雅に処理 - Claudeに「送信をクリックしてみて、失敗したらコンソールエラーをチェック」と依頼
レスポンシブテスト - 複数のビューポートサイズでテスト
他のMCPと組み合わせる - Filesystemでスクリーンショットを保存、Memoryでテスト結果を記憶

❌ 避けるべき

ハードコードされた遅延 - setTimeoutではなくwait_forを使用
脆弱なセレクタ - 複雑なCSSよりdata-testidを優先
コンソールエラーを無視 - 常にコンソールメッセージを確認
大きなスクリーンショット - ファイルサイズを減らすために領域を指定

使用シナリオ

使用シナリオ	説明	複雑さ
E2Eテスト	自動化されたユーザーフローテスト	⭐⭐⭐⭐⭐
ビジュアルリグレッション	スクリーンショット比較	⭐⭐⭐⭐⭐
Webスクレイピング	ウェブサイトからデータを抽出	⭐⭐⭐⭐
パフォーマンス監視	読み込み時間、Web Vitalsを追跡	⭐⭐⭐⭐
アクセシビリティテスト	ARIAラベル、コントラストをチェック	⭐⭐⭐⭐
フォーム自動化	フォームを自動入力して送信	⭐⭐⭐

他のMCPとの統合

Chrome DevTools + Filesystem MCP

Chrome DevTools + Memory MCP

Chrome DevTools + Context7 MCP

結論

Chrome DevTools MCPは、AIアシスタントに対話型ブラウザ自動化をもたらします。自動化スクリプトを書く代わりに、何をしたいかを説明すると、Claudeが技術的な詳細を処理します。

あなたに適していますか？

使用シナリオ	推奨度
手動テスター	⭐⭐⭐⭐⭐
迅速なデバッグ	⭐⭐⭐⭐⭐
Webスクレイピング	⭐⭐⭐⭐
E2Eテスト	⭐⭐⭐⭐
CI/CDパイプライン	⭐⭐（Playwright/Cypressを使用）

今すぐ始める

インストール：claude mcp add --scope user chrome-devtools -- npx -y chrome-devtools-mcp@latest
Claudeを開いて「https://example.com に移動してスクリーンショットを撮って」と言う
魔法が起こるのを見る ✨