Chrome DevTools for agents — AI コーディングエージェントが、本物の開発者のように Chrome DevTools を使って Web ページの検査、デバッグ、最適化を実行できるようにします。
2026 年上半期、GitHub で最も注目を集めたプロジェクトのひとつが ChromeDevTools/chrome-devtools-mcp（45k+ stars）です。その狙いは極めてシンプルです。あなたの AI コーディングエージェント（Claude Code、Cursor、Copilot、Codex など）が、実際の Chrome ブラウザインスタンスを直接操作できるようにする——これだけです。
これは単なる Puppeteer スクリプトのラッパーではありません。MCP（Model Context Protocol）を介して、DevTools の全機能を AI エージェントに公開します。DOM の表示、ネットワークリクエストの分析、スクリーンショットの取得、コンソールログの確認、さらにはパフォーマンストレースデータの取得まで可能です。
この記事では、ゼロからこのプロジェクトの概要、重要性、設定方法、そして実践的な使い方を解説します。
Chrome DevTools MCP とは？
Chrome DevTools MCP は、Google Chrome チームが公式リリースした MCP（Model Context Protocol）サーバーです。AI コーディングエージェント と Chrome ブラウザ の橋渡しをします。
中核機能
| 機能 | 説明 |
|---|---|
| 🖥️ ブラウザデバッグ | DOM の検査、ページコンテンツの読み取り、スクリーンショットの取得 |
| 🌐 ネットワーク分析 | すべての HTTP リクエスト、レスポンスヘッダー、ステータスコードの確認 |
| 📊 パフォーマンストレース | Trace の記録、パフォーマンスデータの取得、CrUX 実ユーザーデータの取得 |
| 💬 コンソール検査 | JS コンソール出力の読み取り（source-mapped スタックトレース含む） |
| ⚡ 自動操作 | Puppeteer ベースの信頼性の高いブラウザ自動化 |
| 🎯 精密な待機処理 | 操作結果の完了を自動待機し、非同期のタイミング問題を回避 |
なぜこれが必要なのか？
これまで AI コーディングエージェントがブラウザを操作する方法は、主に2つしかありませんでした。
- Puppeteer/Playwright スクリプト：自動化コードを手動で書く必要があり、AI が生成したスクリプトは非同期のタイミング問題で頻繁に失敗していました
- Chrome DevTools Protocol (CDP) 直接接続：プロトコルが複雑で、AI エージェントが数十もの低レベル API を「理解」する必要がありました
Chrome DevTools MCP は DevTools の全高度機能を MCP tools としてカプセル化し、AI エージェントは高レベルツールを呼び出すだけでタスクを完了できます。これにより信頼性と効率が大幅に向上しました。
前提条件
インストール前に、以下の環境を確認してください。
# 1. Node.js LTS バージョン（v20 または v22）
node -v # ≥ v20.0.0 推奨
npm -v # ≥ v10.0.0 推奨
# 2. Chrome ブラウザ（最新安定版またはそれ以降）
google-chrome --version
# 3. MCP 対応の AI コーディングエージェント
# Claude Code / Cursor / Copilot / Codex など
インストールと設定
基本インストール
Chrome DevTools MCP は npm で配布されています。一行でインストールできます。
# グローバルツールとしてインストール
npm install -g chrome-devtools-mcp
Claude Code の設定
Claude Code に接続する方法は2つあります。
方法1：CLI インストール（MCP ツール）
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
方法2：プラグインとしてインストール（MCP + Skills）
# プラグインマーケットのレジストリを追加
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
# プラグインをインストール
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
# Claude Code を再起動後、/skills でロードを確認
💡 ヒント：会社のファイアウォールでプラグインのクローンが失敗する場合（
Failed to clone repository）は、CLI 方式でインストールするか、公式のトラブルシューティングガイドを参照してください。
Cursor / VS Code Copilot の設定
MCP 設定ファイルに以下を追加します。
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
VS Code ではコマンドラインからも素早く追加できます。
# macOS / Linux
code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'
# Windows PowerShell
code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}'
OpenAI Codex の設定
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Windows 11 ユーザーは追加で環境変数とタイムアウトの設定が必要です。
# .codex/config.toml
[mcp_servers.chrome-devtools]
command = "cmd"
args = ["/c", "npx", "-y", "chrome-devtools-mcp@latest"]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000
スリムモード
基本的なブラウザ操作だけが必要な場合は、--slim モードでリソース消費を抑えられます。
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
}
}
}
実践シナリオ
シナリオ1：AI エージェントによる自動 Web デバッグ
設定が完了すれば、AI エージェントに直接 Web ページを開かせて分析させることができます。
あなた：https://dashen-tech.com を開いて、トップページの読み込み状況を確認してください。パフォーマンスの問題はありますか？
AI エージェントは次のように動作します。 1. Puppeteer でページを開く 2. スクリーンショットを取得してページの読み込み状態を確認 3. Network パネルを分析してリソースの読み込み状況をチェック 4. Console 出力を読み取って JS エラーを特定 5. Trace を記録して Core Web Vitals を分析
シナリオ2：E2E テスト自動化
従来は E2E テストを書くのに手動で Puppeteer スクリプトを作成する必要がありましたが、今はテストの意図を伝えるだけで済みます。
あなた：テストケースを作成してください。
1. ログインページを開く
2. ユーザー名とパスワードを入力
3. ログインボタンをクリック
4. dashboard にリダイレクトされることを確認
5. エラーログがないことをチェック
AI エージェントはこれらの操作を自動実行し、DevTools で各ステップの結果を検証します。
シナリオ3：パフォーマンス分析と最適化
これは Chrome DevTools MCP の最も強力なシナリオのひとつです。
あなた：https://example.com のパフォーマンスを分析して、最大のボトルネックを見つけてください。
AI エージェントは次のように動作します。 1. Performance Trace を記録 2. Long Tasks、Layout Shifts、FCP、LCP などの指標を分析 3. CrUX の実ユーザーデータを確認 4. 具体的な最適化の提案を提示
シナリオ4：クロスブラウザ互換性チェック
あなた：このページを開いて、コンソールに互換性に関する警告がないか、
Network パネルでリクエストの失敗がないか確認してください。
AI エージェントは同時に以下をチェックします。 - Console の warning/error 情報 - Network リクエストのステータスコードと応答時間 - ページレンダリングが正しいかどうか
高度な設定
データ収集の無効化
Chrome DevTools MCP はデフォルトで使用統計データを収集します。以下の方法で無効にできます。
# 方法1：起動パラメーター
npx chrome-devtools-mcp@latest --no-usage-statistics
# 方法2：環境変数
export CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=1
# 方法3：CI 環境では自動（CI 変数が存在する場合は自動的に無効化）
CrUX データの無効化
パフォーマンスツールはデフォルトで Google CrUX API に Trace URL を送信し、実ユーザーデータを取得します。
npx chrome-devtools-mcp@latest --no-performance-crux
更新チェックの無効化
export CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS=1
既存のブラウザインスタンスに接続
Chrome DevTools MCP を、新しく起動するブラウザではなく、既存のブラウザに接続する場合は、--browser-url を指定します。
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--browser-url=http://127.0.0.1:9222"
]
}
}
}
注意：このモードでは自動的にブラウザインスタンスは起動しません。事前に手動で Chrome を起動し、リモートデバッグを有効にしておく必要があります（
--remote-debugging-port=9222）。
対応 AI コーディングエージェント
Chrome DevTools MCP は、現在主流のすべての AI コーディングエージェントをサポートしています。
| エージェント | インストール方法 | 備考 |
|---|---|---|
| Claude Code | CLI / Plugin | Plugin 方式推奨（Skills 対応） |
| Cursor | MCP 設定 | JSON 設定ファイル |
| GitHub Copilot / VS Code | CLI / Plugin | ワンクリックインストールまたは手動設定 |
| OpenAI Codex | CLI | Windows は追加設定が必要 |
| Cline | MCP 設定 | Cline のドキュメントを参照 |
| Antigravity | MCP 設定 | 内蔵ブラウザに接続 |
| Command Code | CLI | cmd mcp add |
| Copilot CLI | 対話型設定 | /mcp add |
| Amp | CLI / 設定 | Amp のドキュメントを参照 |
まとめ
Chrome DevTools MCP は、AI コーディングエージェント時代におけるマイルストーン的なプロジェクトです。AI が「コードを読む」だけでなく、ブラウザを操作し、ネットワークを分析し、パフォーマンスをデバッグする——まるで本物の開発者のように作業できるようになります。
dashen-tech.com のようなテクノロジーブログにとって、これは次のような意味を持ちます。
- ✅ より信頼性の高い E2E テスト：AI エージェントが記事ページの正常な読み込みを自動検証
- ✅ 自動化されたパフォーマンス監視：定期的に Trace を記録し、Core Web Vitals の変化を監視
- ✅ 迅速な問題特定：ブラウザ上でレンダリング問題、JS エラー、リソース読み込み失敗を直接確認
GitHub アドレス：ChromeDevTools/chrome-devtools-mcp Stars：45k+（2026年7月） License：Apache-2.0 技術スタック：TypeScript + Puppeteer + Chrome DevTools Protocol
AI コーディングエージェントのブラウザ自動化に興味がある方は、以前の記事もぜひご覧ください：Tabby ターミナル完全ガイド、ターミナルエミュレーター比較 2026。