【Chrome DevTools MCPサーバー】AIエージェントがブラウザでデバッグする時代？Googleの最新MCPを徹底解説！

2025年9月24日、GoogleがChrome DevTools MCPサーバーを公開しました！

AIコーディングアシスタントは従来、自分が生成したコードの実行結果をブラウザ上で直接確認できない状態で開発を行っていました。一方で今回紹介するChrome DevTools MCPサーバーは、AIが実際のChromeブラウザでWebページをデバッグできるようにします。具体的には、DevToolsのネットワークモニターやコンソールログ、パフォーマンストレースなどの機能をエージェントが利用可能にして、問題の特定・修正の精度を飛躍的に向上させてくれます。

本記事では、Chrome DevTools MCPサーバーについて特徴を整理しつつ、実際に使いながらその機能をチェックしていきます。

ぜひ最後までご覧ください。

Chrome DevTools MCPサーバーの概要

Chrome DevTools MCPサーバーは、AIエージェントが実際のChromeブラウザを操作・調査できるようにするMCP（Model Context Protocol）サーバーです。

MCPは、大規模言語モデルと外部ツールを接続するオープン標準で、このサーバーを介してエージェントはChrome DevToolsの機能をそのまま利用することができるようになります。たとえば、AIがChromeを起動して指定URLを開き、パフォーマンスを記録、その結果を分析して改善案を提案するといったことが可能になります。

また、ネットワークリクエストの取得、DOM/CSS情報の参照、コンソールログの一覧取得といったツール群も提供されており、AIはこれらを使うことで高度なデバッグや自動操作が可能です。

技術的には、Node.js上で動作して、Puppeteerというブラウザ操作用のAPIを用いることでChromeを自動操作します。MCPクライアントに簡単な設定を追加するだけで、Claude CodeやCursor、GitHub Copilotなど多くのAI開発環境からすぐに利用できるよう設計されています。

なお、MCPについて詳しく知りたい方は、以下の記事も参考にしてみてください。

WEEL

【2025年版】Model Context Protocol（MCP）とは？ClaudeをSlackやGitHubと連携してみた | WEEL Anthropicがリリースした新技術Model Context Protocol(MCP)を徹底解説！AIとGoogle Drive、Slack、GitHubなど多様なツールを簡単に連携し、生産性を向上させる方法を紹介…

類似ツールとの違いと導入メリット

従来のブラウザ自動化ツール（PuppeteerやPlaywrightなど）とは根本的に異なり、Chrome DevTools MCPでは常に最新かつ実際のブラウザを操作します。

一般的なツールだと、新規インスタンスを起動して状態をリセットしますが、このChrome DevTools MCPサーバーは、私たちが普段使いしているChromeをそのまま利用してくれます。その結果、ログイン状態やCookie、拡張機能の設定もそのまま保持されるので、認証操作の手間が不要となります。

また、メモリ上で常駐する実ブラウザを操作するため、立ち上がりが非常に高速であり、全操作がローカルで完結するため機密情報の外部流出リスクも極めて低くなります。

Chrome DevTools MCPサーバーの料金

Chrome DevTools MCPサーバー自体はオープンソースソフトウェアであり、料金は無料です。Google公式のNPMパッケージとして公開されていて、必要なのはNode.jsとChromeブラウザ環境だけです。

Chrome DevTools MCPサーバーの活用可能性

ここからはChrome DevTools MCPサーバーの活用可能性についてご紹介します。

ネットワーク／コンソールエラーの解析

AIエージェントはネットワークリクエストを監視してCORSなどの通信エラーを自動検出し、問題箇所を特定することができます。また、コンソールログを取得してJavaScript例外や警告を調査できるので、エラー原因の切り分けが容易になります。

たとえば「画像が読み込まれない原因を調査して」というような指示を与えることで、失敗したリクエストを特定し、その詳細を解析してフィードバックしてくれます。

パフォーマンス監査と最適化

performance_start_traceツールを使って、AIにページ読み込み時のパフォーマンストレースを取得させることが可能になるかと思います。取得したトレースを分析することで、Largest Contentful Paintが高い原因となるリソースやスクリプトを特定できます。

結果的に、「パフォーマンス改善のために◯◯を変更してください」といったような具体的な最適化提案をAIが行うといった使い方ができます。

ユーザーフローの自動テスト

AIにブラウザ操作をさせてユーザー操作をシミュレーションすることもできます。たとえば、複雑なフォーム送信の流れやナビゲーションをAIが再現して、不具合を検出します。

実際にAIがボタンをクリックしたりフォームに入力したりした結果をもとに、動作の検証や問題点の把握が可能です。この機能によって、E2Eテストの自動化や入力時のバリデーションエラー調査などが効率化できます。

Chrome DevTools MCPサーバーの使い方

はじめに環境を整えます。必要なのは最新のChromeと、Node.js 22.12.0以上、そしてnpmです。これらが揃っていれば追加のランタイムは不要で、MCP クライアントから npx 経由でサーバーを呼び出せます。要件は公式README にも記載されているので参考にしてください。

次に、お使いのMCP対応クライアントにChrome DevTools MCP サーバーを登録します。1番シンプルな設定は、クライアントの設定ファイルに以下のエントリを追加する方法です。

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

また、クライアント別の導入手順も用意されています。たとえばClaude Codeの場合はCLIで以下コマンドを実行すると登録できます。

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

筆者の環境には既にツールが登録されているため赤字のエラー文が出ていますが、初めて登録される方はインストールが進むかと思います。

Cursorに入れる場合は、設定画面の「Settings → MCP → Add Custom MCP」からmcp.jsonファイルを開いて、先ほど上述したエントリの設定を入力すればOKです。

VS Code（Copilot拡張のMCP連携）では code --add-mcp コマンドで追加することができますし、Codex CLIではcodex --add-mcp。Gemini CLIも同様にMCPガイドに従って、上述のエントリ設定を登録します。いずれの手順も公式READMEに記載されていますのでご参照ください。

登録できたら、接続確認をします。1番手軽なのは、エージェントに「LCPを確認して」と頼む方法です。公式ブログでは Please check the LCP of web.dev. を例に挙げています。実行するとChromeが自動で起動し、パフォーマンストレースが収集され、結果が解析されます。

筆者はCodex CLIで接続確認をします。画像2枚は実行ログ・結果の一部抜粋です。動画は実行中の挙動です。

問題なくCodex CLIにChrome DevTools MCPサーバーを接続することができました。

なお、Codex CLIについて詳しく知りたい方は、以下の記事も参考にしてみてください。

WEEL

【Codex CLI実践検証】非エンジニアでも業務効率化できる！画像からUI生成、PDF文字起こしまで | WEEL 押さえておきたいポイント OpenAI発コーディングエージェント マルチモーダル対応 ローカル環境内で完結 OpenAIがo3とo4-miniのリリースに合わせて、Codex CLIを発表しまし…

使ってみた

ここからはいくつかのタスクパターンを通じて、Chrome DevTools MCPサーバーがブラウザを開いたり、必要な観測・解析を自動で進めてくれる挙動を見ていきましょう。Codex CLIで進めていきます。

ネットワーク失敗の特定と原因仮説

ページ閲覧時の失敗リクエストの抽出と原因のあたりをつけてもらいます。動作していないページ（https://httpstat.us/404）を与えます。プロンプトは以下のとおり。

https://httpstat.us/404 を開いて、失敗したネットワークリクエストを一覧化し、ステータスコード・URL・参照元を要約してください。再現手順と原因仮説も添えてください。

意図通りに失敗リクエストの一覧化、再現手順、原因仮説まで出力してくれました。原因仮説は的外れ（Codex CLI環境のせいではなく、そもそもページが機能していないのが正解）でしたが、一定の仮説立てはできているため評価できます。

画像が出ない系のバグ調査

読み込めていない画像の洗い出しと、画面のスクリーンショットで状況を可視化してもらいます。ページはこちら。

https://the-internet.herokuapp.com/broken_images を開きます。
壊れた <img> をすべて検出し、src / CSS セレクタ / HTTP ステータス / 推定原因 を簡潔に要約してください。

重要: スクリーンショットは「本文に画像やbase64を含めず」、必ずファイル保存のみにしてください。
各壊れ画像を中央にスクロールしてから「フルページではなくviewport」のスクリーンショットを撮影し、
./screenshots/broken_images_{index}.png に保存してください。保存先ディレクトリが無ければ作成してください。
最後に保存した絶対パスのみを列挙し、それ以外の添付やbase64は出力しないでください。

こちら何度か実行しましたが、スクショを本文にbase64で埋め込もうとして失敗→無限に直そうとして考え続けている状態が続いてしまいました。

一応スクショをPNGファイルで新規ディレクトリに保存まではしてくれましたが、肝心のスクショは真っ黒状態でした。

なので、スクショ無しとして以下のプロンプトで読み込めていない画像の洗い出しだけしてもらいます。

https://the-internet.herokuapp.com/broken_images を開いて、壊れた <img> をすべて検出し、src / CSS セレクタ / HTTP ステータス / 推定原因を簡潔に要約してください。

結果はこちら（一部抜粋です）

ページを開く→DOM上の<img>列挙→描画状態と壊れ画像の特定→要約までが素直に通っていていい感じです。検出内容も妥当で、asdf.jpg と hjkl.jpg の2枚がHTTP 404、一方で avatar-blank.jpg は200かつ naturalWidth>0と要約できています。

スクショの反映部分でつまづきましたが、Chrome DevTools MCPサーバーがページを開いて壊れている画像の特定までしてくれたことは確認できました。

他にも問い合わせフォームの入力から送信、Web開発におけるデプロイ前後のパフォーマンス比較など、さまざまなタスクで活用できますので、関心のある方はぜひ試してみてください。

注意点

Chrome DevTools MCPサーバーを安全に使うための注意点も押さえておきましょう。

MCPクライアントはブラウザ内のコンテンツにアクセスできますが、機密情報や個人情報を含むページを開く場合は、検証専用のアカウントや --isolated オプションで一時プロファイルを使うなどの対策をとると安心です。

また、一部の環境では、クライアント側のサンドボックス機構がChromeの起動を妨げることがあります。その場合はクライアントのサンドボックス対象から本サーバーを除外するか、サンドボックス外で起動したChromeに --browserUrl で接続する運用に切り替えるなどしましょう。これらはREADMEの免責・既知の制限事項として説明されていますので、確認しておくとよいと思います。

まとめ

Chrome DevTools MCPサーバーは、AIコーディングアシスタントに実ブラウザを直接操作・解析させることで、Web開発の自動化・精度向上に大きな可能性をもたらします。

公開プレビューとはいえ、Google公式の取り組みであり、オープンソースで無償提供されているため、導入ハードルが低いのはありがたいですね。今後、AIエージェントと実ブラウザをつなぐ新しいワークフローはますます重要になるでしょう。

気になる方はぜひ一度体験してみてください。

最後に

いかがだったでしょうか？

弊社では、AI導入を検討中の企業向けに、業務効率化や新しい価値創出を支援する情報提供・導入支援を行っています。最新のAIを活用し、効率的な業務改善や高度な分析が可能です。

大規模言語モデル（LLM）比較レポート

「生成AIを社内で活用したい」「生成AIの事業をやっていきたい」という方に向けて、生成AI社内セミナー・勉強会をさせていただいております。

セミナー内容や料金については、ご相談ください。

また、大規模言語モデル（LLM）を対象に、言語理解能力、生成能力、応答速度の各側面について比較・検証した資料も配布しております。この機会にぜひご活用ください。

無料で相談する

資料をダウンロードする