Chrome DevTools MCP

ChromeDevTools/chrome-devtools-mcp

Google 公式の MCP サーバー。コーディングエージェントが実際の Chrome を操作し、コンソールの確認、ネットワークリクエストの取得、パフォーマンス分析、スクリーンショットを行えます。

選ぶ理由エージェントがフロントエンドを修正した後、自らブラウザを開いて検証・デバッグできます。スクリーンショット頼りのブラウザツールより DevTools レベルの情報が得られます。

導入

GitHub: ChromeDevTools/chrome-devtools-mcp
公式サイト: developer.chrome.com
スター: ★ 54.1k
ライセンス: Apache-2.0
言語: TypeScript
最終更新: 2026年10月23日
カテゴリ: MCP とエージェント

こんな用途に

コーディングエージェントに実際の Chrome を開かせ、コンソールのメッセージやエラーを確認する
ネットワークリクエストの分析やスクリーンショットの取得
パフォーマンストレースを記録し改善点を得る
puppeteer でページ操作を自動化し結果を待つ

始め方

Node.js LTS、npm、最新の安定版 Chrome を用意する
claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest を実行する
Claude Code で「Check the performance of https://developers.chrome.com」と入力して動作を確認する

導入前に

MCP クライアントはブラウザ内のあらゆるデータを閲覧・変更できるため、機密情報は扱わないでください。Google は使用統計を既定で収集し（--no-usage-statistics で無効化）、パフォーマンスツールは URL を CrUX API に送ることがあります（--no-performance-crux で無効化）。

プロジェクトの説明をもとに AI がまとめました。利用前に公式ドキュメントをご確認ください。

似たツール

Agent-ReachMCP とエージェント · ★ 102k
AIエージェントがインターネットのコンテンツを読み取れるようにし、Twitter、Reddit、Bilibiliなどのプラットフォームをサポートします
worldmonitorMCP とエージェント · ★ 89.4k
リアルタイムのグローバルインテリジェンスダッシュボード、AIニュース集約と地政学的モニタリング
career-opsMCP とエージェント · ★ 76.6k
求人板をスキャンし、応募資料を最適化するAIジョブ検索エージェント
SuperpowersMCP とエージェント · ★ 305k
Claude Code などのエージェント向けのスキル（skills）と開発フロー集。ブレインストーミング、計画作成、TDD を経てから、サブエージェントに実装とレビューを任せます。
Context7MCP とエージェント · ★ 63.6k
Claude Code や Cursor などのツールがライブラリ最新版の公式ドキュメントとサンプルをリアルタイムで取得できるようにする MCP サーバー。AI が古い API を書くのを減らします。

MCP とエージェントをもっと見る →

出典 GitHub · 更新日 2026年10月24日 · 著作権は各作者に帰属します