chrome-devtools-mcp — ChromeをAIエージェントから操作・検証するMCPサーバー

概要

chrome-devtools-mcp（Chrome DevTools for agents）は、AIコーディングエージェントが稼働中のGoogle Chromeブラウザを直接制御および検査できるようにするためのツールです。Antigravity、Claude、Cursor、GitHub Copilotなどの各種AIアシスタントに対応しています。

本ツールは、Model Context Protocol（MCP）サーバーとして提供されるほか、単体で動作するCLI（コマンドラインインターフェース）としても提供されています。AIアシスタントにChrome DevToolsの機能へのアクセス権を与えることで、Webフロントエンド開発における信頼性の高いブラウザ自動操作、詳細なエラー解析・デバッグ、パフォーマンス分析の自動化を実現します。日常的にAIエージェントと対話しながらWebアプリケーションを開発・検証するエンジニアに適しています。

主な特徴

READMEに記載されている主な特徴は以下の通りです。

パフォーマンスインサイトの取得: Chrome DevTools（devtools-frontend）を活用してトレースログを記録し、改善に直結するパフォーマンスインサイトを抽出します。
高度なブラウザデバッグ機能: ネットワークリクエストの解析、スクリーンショットの取得、ソースマップが適用されたスタックトレースを含むコンソールメッセージの確認が可能です。
信頼性の高いブラウザ自動化: Puppeteerを利用してChrome上の操作を自動化し、アクションの実行結果を自動で待機します。
CLI単体での利用もサポート: MCPクライアント経由だけでなく、ターミナルから直接ブラウザ操作を実行できるCLIコマンドが付属しています。
専用スキルの提供: エージェント向けに、アクセシビリティ監査、Cookieやセッションのデバッグ、LCP（Largest Contentful Paint）の最適化、メモリリーク調査といった専門タスクを指示するための「スキル」ファイルが用意されています。

使い方

動作環境の要件

実行には以下の環境が必要です。

Node.js LTS バージョン
Google Chrome の現在の安定版（Stable）またはそれ以降
npm

MCPクライアントへの設定

MCPサーバーとして利用する場合、お使いのMCPクライアントの設定ファイルに以下の設定を追加します。

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

chrome-devtools-mcp@latest を指定することで、エージェント利用時に常に最新バージョンのサーバーが使用されます。なお、MCPサーバーへ接続しただけではブラウザは起動せず、ブラウザインスタンスを必要とするツールが呼び出された段階で自動的にChromeが起動します。

設定後、MCPクライアント上で次のようなプロンプトを入力して動作確認を行います。

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

正常に構成されていれば、エージェントがブラウザを開き、パフォーマンストレースを記録します。

CLIとしての利用

MCP経由ではなく、ターミナルから直接ブラウザ操作を行いたい場合は、グローバルインストールして付属の chrome-devtools CLIコマンドを利用します。

npm i chrome-devtools-mcp@latest -g
chrome-devtools navigate_page 1 --url "https://developers.chrome.com"
chrome-devtools take_screenshot 1 --filePath screenshot.png
chrome-devtools stop

エージェント向けスキルの導入

本リポジトリには、エージェントにChrome DevToolsの適切な扱い方を教えるための定義（Skills）が含まれています。これらはプラグインとして導入する方法と、手動で配置する方法があります。

プラグインとして導入する場合、対応エージェントごとに以下のコマンドを実行します。

Claude Code: /plugin marketplace add ChromeDevTools/chrome-devtools-mcp を実行後、/plugin install chrome-devtools-mcp@chrome-devtools-plugins を実行
VS Code / Copilot: コマンドパレットから Chat: Install Plugin From Source を実行し、ChromeDevTools/chrome-devtools-mcp を入力
Gemini CLI: gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp を実行

プラグインに対応していないエージェントの場合は、パッケージをグローバルインストールした上で、各エージェントのスキル用ディレクトリに対象スキルフォルダをコピーします。以下はClaude Code向けの例です。

npm i chrome-devtools-mcp@latest -g
mkdir -p ~/.claude/skills
cp -R "$(npm root -g)/chrome-devtools-mcp/skills/chrome-devtools-cli" ~/.claude/skills/

技術的なポイント

本プロジェクトはTypeScriptで実装されており、以下の技術要素と構成に基づいています。

PuppeteerとChrome DevToolsの統合: ページのナビゲーションや要素の操作にはPuppeteerを利用し、安定した非同期待機処理を行っています。同時に、詳細なネットワーク情報やトレース取得にはChrome DevToolsの内部機構を活用しています。
Model Context Protocol（MCP）準拠: LLMやエージェントと開発ツールを疎結合に接続する標準プロトコルであるMCPのサーバーとして実装されており、特定のAIエディタやクライアントに依存せず幅広く接続できます。
CrUX APIとの連携: パフォーマンス計測ツールは、ラボデータ（手元の環境での計測値）だけでなく、実際のユーザー体験データ（フィールドデータ）を併せて把握するために、GoogleのCrUX（Chrome User Experience Report）APIへトレースURLを送信してデータを取得する設計になっています。
柔軟な起動オプション: リモート接続用のWebSocket設定やヘッドレスモード（--headless）、独立環境での起動（--isolated）、利用可能なツールを限定する軽量モード（--slim）、カスタムブラウザパスの指定（--executablePath）、既存のChromeインスタンスへの接続、Android端末でのデバッグなど、高度な起動パラメータが用意されています。

注意点

利用にあたっては、READMEに記載されている以下の免責事項・注意事項を把握しておく必要があります。

機密情報の取り扱い: 本ツールはブラウザインスタンスの全権限をMCPクライアントに公開します。エージェントがブラウザ内のあらゆるデータを閲覧・変更できる状態になるため、第三者に共有したくない個人情報や機密データを扱うブラウザ環境での利用は避ける必要があります。
公式対応ブラウザ: 公式にサポートされているのは「Google Chrome」および「Chrome for Testing」のみです。その他のChromiumベースのブラウザでも動作する可能性はありますが、保証はされておらず予期しない動作が発生する場合があります。
利用統計（テレメトリ）の自動送信: ツールの信頼性向上を目的として、呼び出し成功率、レイテンシ、環境情報などの利用統計がデフォルトでGoogleに収集されます。オプトアウトする場合は、起動引数に --no-usage-statistics を渡すか、環境変数 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS または CI を設定する必要があります。
CrUX APIへのURL送信: パフォーマンスツール実行時にURLがCrUX APIへ送信されます。これを無効化したい場合は --no-performance-crux フラグを指定します。
アップデート通知とスキルの同期: デフォルトでnpmレジストリを定期確認し、更新を通知します（CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS 環境変数で無効化可能）。また、スキル定義はツール本体のバージョンと密接に紐づいているため、サーバーやCLIを更新した際にはスキル定義も併せて再更新する必要があります。
ライセンス: Apache License 2.0 で公開されています。

まとめ

ChromeDevTools/chrome-devtools-mcp は、AIコーディングアシスタントに強力なWebデバッグおよび自動操作機能を提供する公式MCPサーバーです。DevToolsによる詳細なパフォーマンス解析やPuppeteerベースの自動化をAIエージェントのワークフローに組み込むことができます。テレメトリの初期設定やブラウザ内の情報漏洩リスクに配慮しつつ、適切な設定を行って活用することが推奨されます。