Chrome DevTools MCP - AIプログラミングアシスタントのためのブラウザ制御ツール

プロジェクト概要

Chrome DevTools MCPは、公式のModel Context Protocol (MCP) サーバーであり、Gemini、Claude、Cursor、CopilotなどのAIプログラミングアシスタントが、リアルタイムで実行中のChromeブラウザを制御および検査できるようにします。このツールは、AIコーディングアシスタントにChrome DevToolsの全機能を提供し、信頼性の高い自動化、詳細なデバッグ、およびパフォーマンス分析を可能にします。

GitHub アドレス: https://github.com/ChromeDevTools/chrome-devtools-mcp

主要機能

1. パフォーマンスインサイト

• Chrome DevToolsを使用してパフォーマンスのトレースを記録
• 実用的なパフォーマンス最適化の提案を抽出
• AIアシスタントがパフォーマンスのボトルネックを特定するのを支援

2. 高度なブラウザデバッグ

• ネットワークリクエストを分析
• スクリーンショットをキャプチャ
• ブラウザのコンソール出力を検査
• CORSの問題やコンソールエラーを検出

3. 信頼性の高い自動化

• Puppeteerに基づいたブラウザ自動化を実現
• 操作結果を自動的に待機
• フォーム入力、ページナビゲーション、要素インタラクションをサポート

主な機能カテゴリ

Chrome DevTools MCPサーバーは、以下のカテゴリに分類される26のツールを提供します。

入力自動化（7ツール）

• クリック、フォーム入力、テキスト入力
• ホバー、キーボード操作などのインタラクティブ機能

ナビゲーション自動化（7ツール）

• ページナビゲーション、進む・戻る
• 更新、読み込み完了待機

シミュレーション機能（3ツール）

• デバイスシミュレーション
• 地理位置情報シミュレーション
• ネットワーク条件シミュレーション

パフォーマンス分析（3ツール）

• パフォーマンス追跡記録
• パフォーマンス指標分析
• 最適化提案生成

ネットワーク監視（2ツール）

• ネットワークリクエストリスト
• リクエスト詳細表示

デバッグツール（4ツール）

• コンソールメッセージ表示
• JavaScript実行
• スクリーンショット機能
• DOM検査

システム要件

• Node.js: 20以降のLTSバージョン
• Chrome: 現在の安定版またはそれ以降のバージョン
• npm: パッケージマネージャー

インストールと設定

共通設定

MCPクライアントの設定ファイルに以下を追加します。

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

サポートされているAIプログラミングアシスタント

Claude Code

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

Cursor

Cursorの設定画面から: Settings -> MCP -> New MCP Server を使用し、上記の設定を適用します。

Gemini CLI

# プロジェクトレベル
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

# グローバルインストール
gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

VS Code Copilot

code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'

Cline

ClineのMCP設定ガイドに従い、標準設定を使用します。

設定オプション

Chrome DevTools MCPは以下の設定パラメータをサポートしています。

パラメータ	タイプ	デフォルト値	説明
--headless	boolean	false	ヘッドレスモード（UIなし）で実行するかどうか
--isolated	boolean	false	一時的なユーザーデータディレクトリを作成し、終了時に自動的にクリーンアップ
--channel	string	stable	Chromeのバージョンチャンネル（stable/canary/beta/dev）
--viewport	string	-	初期ビューポートサイズ。例: 1280x720
--executablePath / -e	string	-	カスタムChrome実行可能ファイルのパス
--browserUrl / -u	string	-	実行中のChromeインスタンスに接続
--proxyServer	string	-	プロキシサーバー設定
--acceptInsecureCerts	boolean	false	自己署名証明書や期限切れ証明書のエラーを無視する（注意して使用）
--logFile	string	-	デバッグログファイルのパス

設定例

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

使用例

基本テスト

インストール後、AIアシスタントに以下のプロンプトを入力してテストします。

Check the performance of https://developers.chrome.com

AIアシスタントは自動的に以下を実行します。

1. Chromeブラウザを開く
2. 指定されたウェブサイトに移動する
3. パフォーマンスのトレースを記録する
4. パフォーマンスを分析し、最適化の提案を提供する

一般的な使用シナリオ

1. パフォーマンス分析

example.com の読み込みパフォーマンスを分析し、最適化の提案をしてください

2. ネットワーク問題のデバッグ

my-website.com にCORSエラーがあるか確認してください

3. 自動化テスト

demo.realworld.io に移動し、ログインフォームに入力してスクリーンショットを撮ってください

4. フォーム入力

ログインページでメールアドレス test@example.com とパスワード testpass123 を入力してください

5. コンソール検査

現在のページのコンソールエラーメッセージを表示してください

動作原理

Chrome DevTools MCPは、Model Context Protocol (MCP) 標準に基づいて動作します。

1. MCPプロトコル: 大規模言語モデルと外部ツールやデータソースを接続するためのオープンソース標準
2. ツール公開: MCPプロトコルを通じてChrome DevToolsの機能をツールとして公開
3. AI呼び出し: AIアシスタントがユーザーの要求に応じて適切なツールを呼び出す
4. 自動実行: Puppeteerを使用してChrome内で操作を実行
5. 結果返却: 実行結果をAIアシスタントにフィードバック

実行フローの例

AIアシスタントに「ウェブサイトのパフォーマンスをチェックして」と要求した場合：

ユーザー: 私のウェブサイトのパフォーマンスをチェックしてください
  ↓
AIアシスタント: performance_start_trace ツールを使用します
  ↓
MCPサーバー: Chromeを起動し、ウェブサイトを開き、パフォーマンスのトレースを記録します
  ↓
AIアシスタント: パフォーマンスデータを分析します
  ↓
ユーザー: パフォーマンス分析レポートと最適化の提案を受け取ります

データディレクトリ

Chrome DevTools MCPは以下のユーザーデータディレクトリを使用します。

• Linux / MacOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
• Windows: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

データディレクトリは、--isolated オプションを使用しない限り、実行間でクリアされません。

セキュリティに関する注意事項

⚠️ 重要:

Chrome DevTools MCPは、ブラウザインスタンスの内容をMCPクライアントに公開し、クライアントがブラウザまたはDevTools内のあらゆるデータを検査、デバッグ、変更できるようにします。

MCPクライアントと共有したくない機密情報や個人情報を共有することは避けてください。

トラブルシューティング

問題が発生した場合は、公式のトラブルシューティングガイドを参照してください。

よくある質問

1. ブラウザが自動的に起動しない: MCPサーバーは、クライアントがブラウザを必要とするツールを使用する場合にのみブラウザを起動します。
2. サンドボックス権限の問題: MCPクライアントでサンドボックスが有効になっている場合、無効にするか、--connect-url を使用して手動で起動したChromeインスタンスに接続する必要があるかもしれません。
3. 起動タイムアウト: Windowsでは、startup_timeout_ms の設定を増やす必要がある場合があります。

技術スタック

• コア: Node.js
• ブラウザ自動化: Puppeteer
• プロトコル: Chrome DevTools Protocol (CDP)
• 標準: Model Context Protocol (MCP)

プロジェクトの特徴

1. 公式サポート: Chrome DevToolsチームによって公式に開発および保守されています。
2. 幅広い互換性: 主要なAIプログラミングアシスタントの多くをサポートしています。
3. 機能が豊富: 自動化、デバッグ、パフォーマンス分析をカバーする26のツールを提供します。
4. 簡単な統合: npxを使用するためローカルインストールが不要で、設定も簡単です。
5. 活発な開発: 機能の継続的な更新と改善が行われています。

適用シナリオ

• Web開発デバッグ: AIアシスタントがバグの特定と修正を支援します。
• パフォーマンス最適化: 自動化されたパフォーマンス分析と最適化の提案。
• 自動化テスト: ブラウザ自動化テストの作成と実行。
• ウェブサイト監視: ウェブサイトの機能とパフォーマンスのチェック。
• 開発検証: ブラウザでのコード変更の実際の効果を検証。

フィードバックと貢献

このプロジェクトは公開プレビュー段階にあり、Chrome DevToolsチームはコミュニティからのフィードバックを積極的に求めています。

• 機能リクエストや問題を発見した場合は、GitHub Issues に提出してください。
• AIプログラミングアシスタントを使用する開発者の方も、次世代のAI開発ツールを構築するベンダーの方も、皆様の洞察は非常に貴重です。