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

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

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

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に移動
- click_element - ボタン、リンクなどをクリック
- type_text - フォームに入力
- take_screenshot - ページのビジュアルをキャプチャ
- list_console_messages - コンソールログを表示
- execute_script - JavaScriptを実行
Puppeteer駆動 🤖
- 実戦でテストされたChrome自動化
- 自動待機（ページロード、DOM準備完了）
- 複雑なインタラクションを確実に処理
DevTools統合 🔍
- Chrome DevTools Protocol (CDP)にアクセス
- ネットワークリクエストを検査
- JavaScriptエラーをデバッグ
- パフォーマンスを監視
対話型自動化 💬
- 自然言語コマンド
- AIがCSSセレクタを処理
- スクリプティング不要

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

前提条件

Chrome/Chromiumブラウザがインストールされている
Node.js 16+（Puppeteer用）

方法1：公式CLI（推奨）

# グローバルにインストール
claude mcp add \
  --scope global \
  chrome-devtools \
  -- npx -y @chromedevtools/chrome-devtools-mcp

方法2：手動設定

.mcp.jsonまたは~/.claude/.mcp.jsonを編集：

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

実際の使用例

例1：自動テスト

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

Chrome DevTools MCPが実行：
1. navigate_page("https://myapp.com")
2. click_element("button[data-testid='login']")
3. type_text("input[name='username']", "testuser")
4. type_text("input[name='password']", "testpass123")
5. click_element("button[type='submit']")
6. 返答：成功 - /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. パフォーマンス監視を有効にしてページに移動
2. list_console_messages（エラーをチェック）
3. execute_scriptでWeb Vitalsを取得

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

利用可能なツール

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

2. `click_element(selector)` - 要素をクリック

3. `type_text(selector, text)` - テキストを入力

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

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

6. `execute_script(script)` - JavaScriptを実行

7. `get_page_content()` - ページHTMLを取得

8. `wait_for_selector(selector, timeout)` - 要素が表示されるまで待機

ベストプラクティス

✅ 推奨

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

❌ 避けるべき

ハードコードされた遅延 - setTimeoutではなくwait_for_selectorを使用
脆弱なセレクタ - 複雑な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 global chrome-devtools -- npx -y @chromedevtools/chrome-devtools-mcp
Claudeを開いて「https://example.com に移動してスクリーンショットを撮って」と言う
魔法が起こるのを見る ✨