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

Chrome DevTools MCPサーバー AIエージェント ブラウザ デバッグ Google 最新MCP 徹底解説
押さえておきたいポイント
  • Chrome DevTools MCPサーバーは、AIエージェントが実際のChromeブラウザを操作・解析できるようにするGoogle公式のオープンソースツールである。
  • ネットワーク監視やパフォーマンス測定、ユーザーフローの自動テストなど多様なデバッグ作業を自動化し、Web開発の精度と効率を大幅に向上させる。
  • Node.js環境があれば無料で導入可能であり、セキュアかつ高速なローカル実行によって機密情報の安全な取り扱いにも対応できる。

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

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

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

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

\生成AIを活用して業務プロセスを自動化/

目次

Chrome DevTools MCPサーバーの概要

概要
参考:https://x.com/LangChainJP/status/1970535923138937193

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 CodeCursorGitHub Copilotなど多くのAI開発環境からすぐに利用できるよう設計されています。

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

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

従来のブラウザ自動化ツール(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について詳しく知りたい方は、以下の記事も参考にしてみてください。

使ってみた

ここからはいくつかのタスクパターンを通じて、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.jpghjkl.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エージェントと実ブラウザをつなぐ新しいワークフローはますます重要になるでしょう。

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

WEELが“失敗しないAI導入”を伴走します。

最後に

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

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

株式会社WEELは、自社・業務特化の効果が出るAIプロダクト開発が強みです!

開発実績として、

・新規事業室での「リサーチ」「分析」「事業計画検討」を70%自動化するAIエージェント
・社内お問い合わせの1次回答を自動化するRAG型のチャットボット
・過去事例や最新情報を加味して、10秒で記事のたたき台を作成できるAIプロダクト
・お客様からのメール対応の工数を80%削減したAIメール
・サーバーやAI PCを活用したオンプレでの生成AI活用
・生徒の感情や学習状況を踏まえ、勉強をアシストするAIアシスタント

などの開発実績がございます。

生成AIを活用したプロダクト開発の支援内容は、以下のページでも詳しくご覧いただけます。
➡︎株式会社WEELのサービスを詳しく見る。

まずは、「無料相談」にてご相談を承っておりますので、ご興味がある方はぜひご連絡ください。
➡︎生成AIを使った業務効率化、生成AIツールの開発について相談をしてみる。

大規模言語モデル(LLM)比較レポート
LLM比較レポート

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

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

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

投稿者

  • WEEL Media部

    株式会社WEELが運営する生成系AI関連メディア「生成AI Media」は、AIの専門家によるWebメディアです。 AIに特化した編集部がAIの活用方法、導入事例、ニュース、トレンド情報を発信しています。

  • URLをコピーしました!
  • URLをコピーしました!
目次