Chrome DevTools MCP

エージェント向け Chrome DevTools

エージェント向け Chrome DevTools（chrome-devtools-mcp）を使うと、コーディングエージェント（Antigravity、Claude、Cursor、Copilot など）から、起動中の Chrome ブラウザーを操作し、内容を確認できます。Model Context Protocol（MCP）サーバーおよび CLI として利用できます。どちらも、信頼性の高い自動化、詳細なデバッグ、パフォーマンス分析のために、AI コーディングアシスタントから Chrome DevTools の全機能にアクセスできるようにします。

ツールリファレンス | CLI | スキル | 変更履歴 | コントリビューション | トラブルシューティング | 設計原則

主な機能

• パフォーマンスに関する分析情報の取得：Chrome DevTools を使ってトレースを記録し、実用的なパフォーマンス分析情報を抽出します。
• 高度なブラウザーデバッグ：ネットワークリクエストの分析、スクリーンショットの撮影、ブラウザーコンソールメッセージの確認（ソースマップに対応したスタックトレース付き）ができます。
• 信頼性の高い自動化：puppeteer を使って Chrome での操作を自動化し、操作結果が出るまで自動的に待機します。

免責事項

chrome-devtools-mcp はブラウザーインスタンスの内容を MCP クライアントに公開するため、MCP クライアントはブラウザーまたは DevTools 内のあらゆるデータを確認、デバッグ、変更できます。MCP クライアントと共有したくない機密情報や個人情報は共有しないでください。

chrome-devtools-mcp が公式にサポートするのは、Google Chrome と Chrome for Testing のみです。 ほかの Chromium ベースのブラウザーでも動作する可能性はありますが、保証はされておらず、予期しない動作が発生することがあります。ご自身の責任でご利用ください。 Extended Stable Chrome の最新バージョンに対する修正とサポートの提供に努めています。

パフォーマンスツールは、実ユーザーのエクスペリエンスデータを取得するため、トレースの URL を Google CrUX API に送信する場合があります。フィールドデータとラボデータを併せて提示することで、パフォーマンスの全体像を把握しやすくなります。このデータは Chrome User Experience Report（CrUX） によって収集されます。無効にするには、--no-performance-crux フラグを指定して実行してください。

使用状況の統計

Google は Chrome DevTools MCP の信頼性とパフォーマンスを改善するため、ツールの呼び出し成功率、レイテンシ、環境情報などの使用状況の統計を収集します。

データ収集はデフォルトで有効です。サーバーの起動時に --no-usage-statistics フラグを指定すると、オプトアウトできます。

"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

Google は Google プライバシーポリシー に従ってこのデータを取り扱います。

Google による Chrome DevTools MCP の使用状況の統計収集は、Chrome ブラウザーの使用状況の統計とは独立しています。Chrome の指標収集をオプトアウトしても、このツールの収集が自動的にオプトアウトされるわけではありません。その逆も同様です。

CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS または CI 環境変数が設定されている場合、収集は無効になります。

更新の確認

デフォルトでは、サーバーは npm レジストリで定期的に更新を確認し、新しいバージョンが利用可能になると通知をログに記録します。 CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS 環境変数を設定すると、更新の確認を無効にできます。

要件

• Node.js の LTS バージョン。
• Chrome の現行安定版以降。
• npm

はじめに

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

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

メモ

chrome-devtools-mcp@latest を使用すると、MCP クライアントは常に最新バージョンの Chrome DevTools MCP サーバーを使用します。

MCP クライアントの設定

エディターやエージェント（Antigravity、Claude Code、Cursor、VS Code など）に固有のセットアップ手順については、クライアント設定ガイドをご覧ください。

最初のプロンプト

すべて正常に動作するか確認するため、MCP クライアントに以下のプロンプトを入力してください。

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

MCP クライアントがブラウザーを開き、パフォーマンストレースを記録します。

メモ

MCP クライアントがブラウザーの実行を必要とするツールを使用すると、MCP サーバーがブラウザーを自動的に起動します。Chrome DevTools MCP サーバーに接続しただけでは、ブラウザーは自動的に起動しません。

CLI

このパッケージには chrome-devtools CLI も含まれています。MCP を使わずに、ターミナルからブラウザーを操作できます。

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

すべてのコマンドとオプションについては、CLI ガイドをご覧ください。

スキル

このパッケージには、エージェントに Chrome DevTools の使い方を教えるスキルが含まれています。

スキル	使用目的
chrome-devtools	MCP ツールを使ってページをデバッグし、自動化します。
chrome-devtools-cli	CLI を実行し、シェルスクリプトを作成します。
a11y-debugging	アクセシビリティの問題を監査し、修正します。
cookie-debugging	Cookie、セッション、認証をデバッグします。
debug-optimize-lcp	Largest Contentful Paint をデバッグし、改善します。
memory-leak-debugging	メモリーリークを検出し、修正します。
troubleshooting	MCP と Chrome 間の接続問題を解決します。

プラグインとしてスキルをインストールする

プラグインをインストールすると、MCP サーバーと CLI スキルを含むすべてのスキルがインストールされます。

• Claude Code: /plugin marketplace add ChromeDevTools/chrome-devtools-mcp を実行し、続けて /plugin install chrome-devtools-mcp@chrome-devtools-plugins を実行します。
• Copilot / VS Code: Chat: Install Plugin From Source を実行し、ChromeDevTools/chrome-devtools-mcp を入力します。
• Gemini CLI: gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp を実行します。

詳しくは、クライアント設定ガイドをご覧ください。

スキルを手動でインストールする

エージェントがプラグインに対応していない場合は、スキルフォルダーをエージェントのスキルディレクトリにコピーしてください。npm パッケージにはスキルが含まれています。

npm i chrome-devtools-mcp@latest -g
# Example for Claude Code. Use the skills directory of your agent.
mkdir -p ~/.claude/skills
cp -R "$(npm root -g)/chrome-devtools-mcp/skills/chrome-devtools-cli" ~/.claude/skills/

重要

chrome-devtools-cli スキルには CLI が必要です。このスキルを使用する前に、パッケージをグローバルにインストールしてください。

スキルを最新の状態に保つ

スキルには、特定のバージョンのツールについて説明されています。MCP サーバーまたは CLI を更新するたびに、スキルも更新してください。古いスキルでは、変更済みのツールやパラメーターを使うようエージェントに指示することがあります。

• プラグイン: エージェントのプラグインマネージャーにある更新コマンドを使用してください。上記の Gemini CLI コマンドは --auto-update により自動更新を有効にします。
• 手動インストール: パッケージを更新してから、スキルフォルダーを再度コピーしてください。

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/

ツール

問題が発生した場合は、トラブルシューティングガイドをご覧ください。 サポートされている MCP 機能の一覧については、ツールリファレンスをご覧ください。

設定

サーバーパラメーター（--headless、--isolated、--slim など）の一覧と WebSocket 接続の設定方法については、設定ガイドをご覧ください。

基本的なブラウザータスクのみを行う場合、--slim フラグを指定すると、利用できるツールが限定されます。Slim ツールリファレンスをご覧ください。

高度な使用方法

同時セッションの処理、永続的なユーザーデータディレクトリ、Chrome を新たに起動せず実行中の Chrome インスタンスへの接続、Android でのデバッグなどの高度な機能については、高度な使用方法ガイドをご覧ください。

ブラウザーサブエージェントとしての統合

エージェント型ツールを開発していて、製品の一部として統合されたブラウザーサブエージェントを提供したい場合は、Chrome DevTools for agents を基盤として構築することをおすすめします。

リファレンス実装については、Gemini CLI ブラウザーエージェントのドキュメントをご覧ください。