Googleは2025年9月23日、コーディングエージェント向けにChrome DevTools MCPサーバーの公開プレビューを開始した。

• Chrome DevTools (MCP) for your AI agent - Chrome for Developers Blog
• ChromeDevTools/chrome-devtools-mcp - GitHub

Chrome DevTools MCPサーバーは、Chrome DevToolsの能力をMCPを利用してエージェントが扱えるようにする。それにより、エージェントがChrome DevToolsのデバッグ機能およびパフォーマンス解析機能を直接利用でき、生成コードのブラウザ上での挙動把握と不具合修正の精度向上を可能にする。つまり、これまでのエージェントは生成したコードがブラウザで実際にどう動作しているかを視認できず「blindfold（目隠し⁠）⁠」状態にあったが、このMCPサーバーを使うことでChrome上での直接デバッグやトレース解析ができるようになる。

Chrome DevTools MCPサーバーの各ツールは以下のとおり。詳しくはGitHubにあるツールリファレンスページを参照のこと。なお、Chromeの自動操作のためにPuppeteerを使う。

• Input automation: click, drag, fill, fill_form, handle_dialog, hover, upload_file
• Navigation automation: close_page, list_pages, navigate_page, navigate_page_history, new_page, select_page, wait_for
• Emulation: emulate_cpu, emulate_network, resize_page
• Performance: performance_analyze_insight, performance_start_trace, performance_stop_trace
• Network: get_network_request, list_network_requests
• Debugging: evaluate_script, list_console_messages, take_screenshot, take_snapshot

利用シナリオとして、以下のような使い方が示されている。

コード変更のリアルタイム検証

変更後のコードが意図どおり動作するかをブラウザ上で即時に検証する。

Verify in the browser that your change works as expected.
（⁠意訳：変更が期待どおりに動作していることをブラウザで確認してください。⁠）⁠

ネットワークおよびコンソールエラーの診断

ネットワークリクエストを解析して、CORSなどの問題があるかを確認したり、コンソールログを調査して機能が期待どおり動かない理由を把握したりする。

A few images on localhost:8080 are not loading. What's happening?
（⁠意訳：localhost:8080でいくつかの画像が読み込まれていない。何が起きているのか。⁠）⁠

ユーザー行動のシミュレーション

ナビゲーション、フォーム入力、ボタンクリックなどのユーザー操作を再現して、バグを再現したり、ユーザーフローを検証したりする。

Why does submitting the form fail after entering an email address?
（⁠意訳：メールアドレス入力後にフォーム送信が失敗する。それはなぜか。⁠）⁠

ライブスタイルとレイアウト問題のデバッグ

ライブページのDOMおよびCSSを確認して、オーバーフローなどのレイアウトやスタイル上の異常を特定し、具体的な修正案を得る。

The page on localhost:8080 looks strange and off. Check what's happening there.
（⁠意訳：localhost:8080のページの見た目がおかしく違和感がある。何が起きているか確認してください。⁠）⁠

パフォーマンス監査の自動化

パフォーマンストレースを取得・分析して、LCPなどの指標に基づいてパフォーマンス課題を特定し、改善に役立てる。

Localhost:8080 is loading slowly. Make it load faster.
（⁠意訳：localhost:8080の読み込みが遅い。より速く読み込めるようにしてください。⁠）⁠

Chrome DevTools MCPサーバーは、各種エージェント（Claude Code、Cline、GitHub Copilot/VS Code、Cursor、Gemini CLI、Gemini Code Assistなど）で利用できる。インストール方法は各ツールのMCPクライアント設定に構成エントリを追加する。詳しいインストール方法はGitHubのREADMEを参照のこと。

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

インストール後の動作確認として、「⁠Please check the LCP of web.dev.」というプロンプトをエージェントに与えてLCP（Largest Contentful Paint）計測を試すことを紹介している。実際にVS CodeのGitHub Copilotで試すと、Chromeが自動起動してweb.devを開き、LCP計測が行われ、次のような応答が得られる。

Chrome DevTools MCPサーバーは公開プレビューの段階であり、今後段階的に機能を拡張していく方針。

GoogleのAddy Osmani氏がChrome DevTools MCPサーバーを紹介する動画を投稿している。

9月26日追記：
Chrome DevTools MCPサーバーがGitHub MCP Registryに掲載されたことを案内した。