AIコーディングエージェントはコードを書くのが得意ですが、そのコードがブラウザで実行されたときに何が起こるかについては「見えない」状態です。コンソールエラー、レイアウトシフト、ネットワークタイムアウト、メモリリーク — これらのランタイム問題は、ソースファイルしか見えないエージェントには invisible です。
Chrome DevTools MCPサーバーはそれを変えます。Chrome DevTools公式チームによって作成されたこのオープンソースMCPサーバーは、AIエージェントにChrome DevToolsの全機能を提供します — AIコーディングアシスタントから直接利用できます。
Chrome DevTools MCPとは#
Chrome DevTools MCPは、AIコーディングエージェントとライブブラウザインスタンスを橋渡しするModel Context Protocolサーバーです。Chrome DevToolsの全機能セットを、エージェントが呼び出せるMCPツールとして公開します：
- ページ遷移とDOMアクセシビリティツリーの検査
- ソースマップ付きスタックトレースのコンソールログ取得
- ネットワークリクエストとレスポンスの監視
- パフォーマンストレースの記録と分析
- ヒープスナップショットの取得とメモリリークのデバッグ
- Lighthouse監査の実行
- デバイス、ネットワーク状態、位置情報のエミュレート
内部ではPuppeteerとChrome DevTools Protocol (CDP)を使用してChromeインスタンスを制御しています。
インストール方法#
# npx経由（インストール不要）
npx -y chrome-devtools-mcp@latestMCPクライアント設定に追加：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}利用可能なツール#
サーバーは7カテゴリ、50以上のMCPツールを提供：
ナビゲーション（6ツール）#
navigate_page, new_page, close_page, list_pages, select_page, wait_for
入力自動化（10ツール）#
click, drag, fill, fill_form, handle_dialog, hover, press_key, type_text, upload_file, click_at
エミュレーション（2ツール）#
emulate, resize_page — デバイス、ビューポート、ネットワーク、CPU、位置情報をエミュレート
デバッグと分析（8ツール）#
evaluate_script, get_console_message, list_console_messages, lighthouse_audit, take_screenshot, take_snapshot, screencast_start, screencast_stop
ネットワーク（2ツール）#
list_network_requests, get_network_request
パフォーマンス（3ツール）#
performance_start_trace, performance_stop_trace, performance_analyze_insight
メモリ/ヒープ（12ツール）#
take_heapsnapshot, compare_heapsnapshots, get_heapsnapshot_retaining_pathsなど — 完全なヒープ分析
エージェント統合#
Claude Code#
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latestCursor#
Cursor設定 → MCP → 新規MCPサーバー、JSON設定をペースト。
Gemini CLI#
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latestなぜ重要か#
Chrome DevTools MCP以前は、AIコーディングエージェントはフロントエンド作業において静的コード分析に制限されていました。ソースコードをレビューできても、ブラウザが実際に何をレンダリングしているかを見ることができず、ランタイムのコンソールエラーをキャッチできず、実際のパフォーマンスを測定できず、UI修正が実際に機能するかを確認できませんでした。
現在では、AIエージェントは以下が可能です：
- コードを書き、ビルドし、ブラウザを開き、結果を検証する — すべて自律的に
- ランタイム問題をデバッグ — コンソール出力、ネットワークタイミング、ヒープスナップショットを読み取る
- パフォーマンスを監査 — Lighthouseとトレース分析で
- 複数デバイスでテスト — エミュレーションを使用
これにより、コード作成とブラウザでの検証のループが閉じられました — 以前はすべてのステップで人間の開発者が必要だった能力です。