Chrome DevTools MCP：AIインテリジェンスにChromeブラウザを制御・検出させる

Chrome DevTools MCPは、AIプログラミングアシスタント（Gemini、Claude、Copilotなど）が、実行中のGoogle Chromeブラウザを直接制御し、検査できるようにするサーバーとして機能するオープンソースツールです。 このツールは、AIプログラミング・アシスタントの核となる問題を解決する。つまり、コードを書くことはできるが、目隠しをしてプログラミングしているかのように、コードがブラウザ上で実際にどのように実行されるかを見ることができないのだ。 Model-Context-Protocol（MCP）を使用することで、このツールはAIアシスタントを強力なChrome開発者ツールに接続し、AIによる自動操作、深いデバッグ、パフォーマンス分析を可能にする。 つまり、AIはコードを生成するだけでなく、実環境でテスト、検査、修正することができ、単なる推測ではなく、実際のブラウザデータに基づいて変更を提案する。 開発者は、シンプルなnpxコマンドを実行し、サポートされているAIクライアントに設定する。

機能一覧

• パフォーマンス分析Chrome Developer Tools を使用して、ウェブページのパフォーマンスの軌跡を記録し、改善のための実用的なインサイトを抽出します。
• ブラウザデバッグウェブリクエストの分析、ブラウザコンソール情報の読み取り、JavaScriptスクリプトの実行、ウェブページのスクリーンショットの撮影が可能。
• 信頼性の高いオートメーション: Puppeteerライブラリをベースに、ユーザーのクリック、フォームへの入力、ページナビゲーションをシミュレートし、アクションが完了するのを自動的に待つなど、Chromeブラウザの制御を自動化します。
• 設備シミュレーション中央処理装置(CPU)の性能とネットワーク条件のシミュレーションをサポートし、異なる環境でのウェブページの性能テストを容易にします。
• マルチクライアント対応Claude、Cursor、VS CodeのCopilot、Geminiなどの様々なAIプログラミングアシスタントクライアントと統合することができます。

ヘルプの使用

Chrome DevTools MCPはModel-Context-Protocol (MCP)サーバーとして動作し、Chromeブラウザを制御する機能をAIプログラミングアシスタントに提供します。 以下は、ツールのインストールと使用方法の詳細です。

環境要件

作業を始める前に、お使いのシステムが以下の条件を満たしていることを確認してください：

• Node.js 22以降。
• Chrome Stableまたはそれ以降。
• npmパッケージマネージャ。

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

インストールして実行する最も簡単な方法はnpxコマンドを実行すると、このコマンドは最新のパッケージを取得して実行します。MCP対応AIクライアントに以下の設定を追加する必要があります：

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

利用するchrome-devtools-mcp@latestAIクライアントが常に最新バージョンのサービスを使用していることを保証することが可能です。

さまざまなAIクライアントの設定

1. クロード・コード
   クロードコードのコマンドラインツールを使用してMCPサーバーを追加します：

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

2. コパイロット／VSコード
   MCPのインストールガイドに従って、VS Codeに上記の標準設定を追加します。また、VS Codeのコマンドラインツールを使用してインストールすることもできます：

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

3. カーソル
   • クイック・インストールCursor ソフトウェアの "Install in Cursor "ボタンをクリックしてインストールしてください。
   • 手動インストール:
     1. カーソルの Settings -> MCP.
     2. 打込む New MCP Server.
     3. 上記で提供された標準的なJSON設定を貼り付ける。
4. ジェミニCLIまたはジェミニコードアシスト
   公式のMCPコンフィギュレーション・ガイドに従い、上記で提供された標準的なJSONコンフィギュレーションを使用する。

コア機能の操作

サーバーが設定されると、AIプログラミング・アシスタントはブラウザを操作するための一連のツールを呼び出すことができます。これらのツールはあらかじめ定義されたコマンドであり、AIはあなたの自然言語の指示に基づいてそれらを選択し実行する。

• ページのナビゲーションと操作
  AIに「新しいページを開き、特定のURLにアクセスする」と指示すれば、AIはnew_page歌で応えるnavigate_pageツールを使用します。また、「開いているすべてのタブを一覧表示」させることもできる(list_pages)または「現在のページを閉じる」(close_page).
• アナログ・ユーザー入力
  AIに「ページ上のボタンをクリックする」よう指示することができる(click)または「入力ボックスをテキストで埋める」(fill).これらの操作は、実際のユーザーの行動を確実にシミュレートするPuppeteerの実装に依存しています。
• パフォーマンス分析
  これはコア機能である。あなたはAIに「現在のページの読み込みパフォーマンスを分析する」よう頼むことができ、AIは順番に以下のことを行う：
  1. 各論 performance_start_trace ツールはパフォーマンスの軌跡を記録し始める。
  2. ページを更新するか、指定されたアクションを実行する。
  3. 各論 performance_stop_trace レコードを閉じる
  4. 各論 performance_analyze_insight 収集したデータを分析し、パフォーマンスのボトルネックや最適化の推奨事項を自然言語でレポートします。
• テスト中にコンポーネントを調整する
  プログラムエラーが発生した場合、AIに「ブラウザのコンソールにエラーメッセージがないか確認してください」と頼むと、AIはlist_console_messagesツールを使ってログを取得する。 スクリプトを実行してデータを取得する」こともできる (evaluate_script)または "現在のページの画像をキャプチャ"(take_screenshot)を分析した。

高度な設定

詳しい情報はargsコマンドライン引数を配列に追加して、サーバの挙動をさらにカスタマイズします。たとえば、ヘッドレスモード (ブラウザのインターフェイスが表示されない) やスタンドアロンの一時的な設定で実行します：

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

以下は一般的な設定パラメータである：

• --headlessUIレスモードでChromeを実行します。
• --isolatedブラウザを閉じたときに自動的にクリーンアップされます。
• --channelのように、使用するChromeのバージョンチャンネルを指定します。canaryそしてbetaもしかしたらdev.
• --browserUrlポートフォワーディングで、すでに起動しているChromeインスタンスに接続します。

利用可能なすべてのコンフィギュレーション・オプションを確認するには、ターミナルで次のコマンドを実行します。 npx chrome-devtools-mcp@latest --help.

アプリケーションシナリオ

1. 自動化されたフロントエンドのパフォーマンス分析
   AIインテリジェンスは、指定されたウェブページを自動的に開き、パフォーマンストレースを開始し、一連のユーザーアクションを実行し、トレースを停止して結果を分析し、最終的に人間が読める言語でパフォーマンスレポートと最適化の推奨事項を生成することができます。
2. Webアプリケーションの自動デバッグ
   サイト機能の異常が検出された場合、開発者はAIインテリジェンスに操作の再現を指示し、コンソールのエラーログをチェックしたり、ネットワークリクエストの失敗を表示したり、特定のJavaScriptコードを実行して問題の根本原因を診断することができる。
3. 回帰テストとUI検証
   AIインテリジェンスは、あらかじめ設定されたプロセスに従ってウェブページへのアクセス、フォームへの入力、ボタンのクリックを自動的に行い、スクリーンショットを比較することでインターフェイスが期待値と一致しているかどうかを検証することで、UI回帰テストを自動化することができる。
4. ウェブ・データ・キャプチャと処理
   プログラムでブラウザを制御することで、AIインテリジェンスはターゲットページに移動し、DOMから情報を抽出し、データを処理し、単純なデータクローリングタスクの結果をユーザーに返すことができる。

品質保証

1. MCPとは？
   MCPとは、Model Context Protocolの略である。GeminiやClaudeのような大規模な言語モデル（LLM）を外部のツールやサービスと接続するためのオープンスタンダードです。 Chrome DevTools MCPは、このプロトコルを実装したサーバーであり、AIとChrome Developer Tools間の「アダプター」として機能する。
2. このツールは安全ですか？注意することはありますか？
   このツールは、ブラウザのインスタンスの内容をAIクライアントに公開し、AIがブラウザ内のあらゆるデータを検査、デバッグ、あるいは変更することを可能にする。したがって、AIクライアントへの情報漏洩を防ぐために、機密情報や個人情報を含むウェブページを開いたり操作したりすることは避けるべきです。
3. なぜ一部の顧客でスタートアップが失敗するのか？
   一部のAIクライアント（macOS SeatbeltやLinuxコンテナをサポートするクライアントなど）は、サンドボックス環境でMCPサーバーを実行します。Chromeは起動時に独自のサンドボックスを作成する必要があるため、パーミッションの競合や起動の失敗につながる可能性があります。回避策としては、AIクライアントでChrome DevTools MCPのサンドボックス制限を無効にするか、手動でChromeインスタンスを外部から起動して--browserUrlパラメータを使用してサーバーに接続する。