AIエージェント向け Chrome DevTools (MCP)

• Chrome DevTools MCPサーバー の公開プレビュー版が公開され、AIコーディングエージェントが Chrome DevToolsのデバッグ機能とパフォーマンス機能を利用 できるようになった
• 従来はエージェントがコード実行結果を確認できなかったが、今後は ネットワーク、コンソール、DOM、パフォーマンストレース などの実際のランタイムデータを活用できる
• DevTools MCPサーバー を活用することで、リアルタイムのコード検証、ネットワーク・コンソールエラー分析、ユーザー操作シミュレーション、スタイル・レイアウトのデバッグ、自動パフォーマンス監査 など、さまざまな自動化が可能になる
• 開発者はMCPクライアント設定にサーバーを追加するだけですぐに利用でき、サンプルプロンプトとして LCPの確認 や フォーム送信エラーの診断 などを実行できる
• GoogleはコミュニティからのフィードバックをもとにMCP機能を拡張していく予定

---

概要

• Googleは新しい Chrome DevTools モデルコンテキストプロトコル(MCP)サーバー の公開プレビュー版をリリースした
• これにより、AIコーディングアシスタントが Chrome DevTools のデバッグ機能やパフォーマンス計測機能をブラウザ上で直接利用できる環境を提供できるようになった
• つまり、コーディングエージェントがブラウザで実行されるコードの実際の挙動を確認できないことで生じていた課題の解決に役立つ

モデルコンテキストプロトコル(MCP)の紹介

• モデルコンテキストプロトコル(MCP) は、大規模言語モデル(LLM)を 外部ツール やデータソースと接続するためのオープンソース標準
• Chrome DevTools MCPサーバーはこの 標準 を活用してAIエージェントと連携し、Webデバッグやパフォーマンストレーシングなど、さまざまなツールの利用を可能にする
• たとえば、performance_start_trace ツールを使うことで、LLMがブラウザを起動し、パフォーマンス情報を収集・分析して改善点を提案できる
• MCPプロトコルにより、コーディングエージェントはWebサイト開発や問題解決に対して、より強力な支援を得られる
• MCPの詳しい仕組みは、公式の MCPドキュメント で確認できる

主な活用例

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

  • AIエージェントがコードを修正した後、Chrome DevTools MCPで ブラウザ上の挙動 を即座に確認できる
  • プロンプト例:

    Verify in the browser that your change works as expected.  
    

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

  • ネットワークリクエストの分析、CORS問題の検出、コンソールログの確認など、自動診断 をサポート
  • プロンプト例:

    A few images on localhost:8080 are not loading. What's happening?  
    

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

  • ブラウザ内のナビゲーション、フォーム入力、ボタンクリックなど、実際の利用フローの 自動テスト やバグ再現を支援
  • プロンプト例:

    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 is loading slowly. Make it load faster.  
    

• 利用可能なMCPツールの一覧は、公式の ツールリファレンス文書 で確認できる

始め方

• MCPクライアントに以下の設定を追加することで、Chrome DevTools MCPサーバー と連携できる

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

• サンプルプロンプトで動作を確認できる

  Please check the LCP of web.dev.  
  

• 詳細情報とドキュメントは、GitHubの Chrome DevTools MCPドキュメント で提供されている

参加と拡張計画

• Googleはこの公開プレビューの提供を出発点として、Chrome DevTools MCP を段階的に発展させていく予定
• コミュニティからの意見収集を通じて、今後の追加機能を決定する計画
• AIコーディング支援ツールの利用者および次世代AI開発ツールの提供者の双方からの意見と参加を積極的に歓迎している
• 改善要望や発見した問題は、GitHub Issues を通じて報告できる

[shakespeares]

Playwrightよりも優れている活用例があるのかなと思います。
端的に見ると、やや物足りない気がします。