この記事で解決する課題
AI コーディングエージェントにフロントエンドを書かせると、「コードは生成できるのに、実際にブラウザでどう動いているかはエージェントに見えない」という壁に当たります。エラーの再現もパフォーマンス計測も結局人間がやることになりがちです。この記事では、Google の Chrome DevTools チームが公式に出している chrome-devtools-mcp を使って、エージェント自身に実ブラウザでのデバッグとパフォーマンス分析をさせる方法を紹介します。
Chrome DevTools MCP とは
chrome-devtools-mcp は、MCP(Model Context Protocol)サーバーとして Chrome DevTools の機能をコーディングエージェントに開放するツールです。単なるブラウザ操作(クリック・入力)にとどまらず、次ができるのが特徴です。
- パフォーマンストレースの記録と、そこからの改善インサイト抽出(
performance_start_trace/performance_stop_trace/performance_analyze_insight) - コンソールメッセージやネットワークリクエストの取得によるデバッグ
- スクリーンショット取得やフォーム入力などの通常のブラウザ自動化
Puppeteer 系の自動化ツールとの違いは、「DevTools が持つ計測・診断機能」までエージェントのツールとして提供される点です。
必要環境
公式 README の Requirements より:
- Node.js LTS 版
- Chrome 安定版(current stable)以降
セットアップ
MCP クライアントの標準的な設定はこれだけです(chrome-devtools-mcp@latest 指定により常に最新版が使われます):
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
Claude Code ならワンライナーで登録できます:
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
Codex CLI の場合:
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Gemini CLI の場合:
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
動作確認
README で案内されている確認方法は、エージェントに次のプロンプトを投げるだけです。
Check the performance of https://developers.chrome.com
MCP クライアントがブラウザを起動し、パフォーマンストレースを記録すれば成功です。
実運用で使えるオプション
CI やヘッドレス環境向けには --headless、ツール数を絞りたい場合は --slim が用意されています。README には両方を組み合わせた例が載っています:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
}
}
}
そのほか押さえておきたいオプション:
-
--channel: 使用する Chrome のチャンネル指定(既定は stable。canary なども指定可) -
--viewport: 起動する Chrome のビューポートサイズ指定(例1280x720) -
--category-performance=false: パフォーマンス系ツールを無効化してツール数を削減
すでに起動中の Chrome に接続したい場合は、http://127.0.0.1:9222/json/version の webSocketDebuggerUrl を使って接続する方法も README に記載されています。
注意点(利用前に知っておくべきこと)
2 点、README に明記されている挙動があります。
-
CrUX API への URL 送信: パフォーマンストレース対象の URL は、フィールドデータ取得のため CrUX API に送られます。無効化するには
--no-performance-crux(または--performance-crux=false)を付けます。 - 利用統計の収集: Google はツール呼び出しの成功率・レイテンシ・環境情報などの利用統計を収集します。社内プロジェクトで使う場合はポリシーに合うか確認しておくと安心です。
まとめ
- chrome-devtools-mcp は「操作」だけでなく「計測・診断」までエージェントに渡せる公式 MCP サーバー
- 導入は
npx chrome-devtools-mcp@latestを MCP クライアントに登録するだけ - ヘッドレス運用・ツール絞り込み・既存 Chrome への接続までオプションで対応
- CrUX への URL 送信と利用統計収集はデフォルト有効なので、必要に応じてオプトアウト