Chrome DevTools MCPサーバー

Chrome DevTools MCP は、すでに使い慣れた DevTools パネルを AI エージェントの前に置きます。ほとんどのブラウザ向けサーバーがクリックや入力に焦点を当てているのに対し、これはページが遅い原因、ログ、リクエスト、メモリに保持されている内容を明らかにすることに焦点を当てています。GitHub の ChromeDevTools 組織によって公開されており、55,670 個のスターを獲得し、Apache-2.0 ライセンスです。

私たちは 2026 年 11 月 11 日に公開されたバージョン 1.13.0 をインストールし、2026 年 11 月 14 日に 2 つのことを行いました。MCP Inspector を通じて異なるオプションでそのツールを一覧表示し、小さな MCP クライアントで操作して、私たち自身のサイトである hostedmcp.org でパフォーマンストレースを記録し Lighthouse を実行しました。以下の数値はそれらの実行によるものです。

インストール

Node.js 20.19 以降と Chrome が必要です。ブラウザはサーバーの起動時ではなく、必要とする最初のツール呼び出しのときに起動します。

Claude Code:

claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --isolated --no-usage-statistics

Cursor、Claude Desktop、Windsurf など、JSON で設定するクライアント:

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

Codex:

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --isolated --no-usage-statistics

この 2 つのフラグはデフォルトではなく、推奨設定です。--isolated を指定すると、セッションごとに一時的なプロファイルが使われます。指定しない場合、サーバーは ~/.cache/chrome-devtools-mcp/chrome-profile に永続プロファイルを保持し、実行間でクリアされません。--no-usage-statistics は、サーバーがデフォルトで Google に送信する使用統計を無効にします。当社の config builder では、複数のクライアント向けに同じエントリを生成できます。

README で提案されている最初のプロンプトは、動作確認に適しています: "Check the performance of https://developers.chrome.com"。

ツール数の内訳

1.13.0 で tools/list をオプションなしで実行すると 33 個のツールが返され、ツール定義は合計 31,498 バイトでした。--slim を付けると navigate、evaluate、screenshot の 3 個だけになり、1,042 バイトでした。

各グループは --categoryEmulation=false のようなフラグで無効にできます。その他は有効にするまでオフです: ネットワークモック、拡張機能、PWA 自動化、仮想 WebAuthn 認証器、そしてページが WebMCP 経由で自身で公開するツールです。必要なものだけを有効にしてください。31 KB の定義は一部のサーバーと比べれば小さいものの、リクエストのたびに送信されます。

トレースが返すもの

サーバーをヘッドレスで起動し、new_page で https://hostedmcp.org/ を開き、reload と autoStop を有効にして performance_start_trace を呼び出し、最後に lighthouse_audit を実行しました。

トレースの呼び出しには約6秒かかり、9,436バイトのテキストが返りました。レポートの内容は次のとおりです。

続いて、検出されたインサイトが一覧表示され、それぞれに説明と、該当する場合は推定削減量が付いていました。LCP の内訳、レンダーブロッキングリクエスト（FCP と LCP の 25 ms）、ネットワーク依存ツリー、画像配信、サードパーティ、キャッシュの有効期間、レガシー JavaScript です。エージェントはこれらのどれに対しても performance_analyze_insight を呼び出して詳細を取得できます。返信の最後には自身のコールツリー形式の説明があり、モデルはそれに続くフレームチャートのデータを読み取れます。

lighthouse_audit には約7秒かかり、6,687バイトが返りました。アクセシビリティ 94、ベストプラクティス 100、SEO 100、そして4つ目のカテゴリであるエージェントブラウジングが 67 です。4件の監査が失敗しました。1件目はカラーコントラストで、12個の要素が該当し、その中にはヘッダーの検索ラベルも含まれます。要求される 4.5 に対して比率は 4.33 でした。つまりツールは役割を果たしており、こちらに修正すべき点があるということです。

これらの数値には2点の注意があります。first byte までの時間が 0.8 ms というのは、ページがウォームなエッジキャッシュから返されたことを意味し、コールドリクエストならもっと遅くなります。また --no-performance-crux を渡したため、トレースには実ユーザーのフィールドデータが含まれていません。デフォルトでは、サーバーは Google の CrUX データセットでページの URL を検索します。

pageId の罠

最初の実行では about:blank を計測してしまいました。1.13.0 ではページツールが pageId を受け取り、新しいセッションは番号1の空白ページから始まります。new_page の呼び出しでサイトはページ2として開かれ、選択状態になりましたが、こちらは1を渡していました。トレースは忠実に、空のページに対して CLS 0 を報告しました。エージェントは通常 list_pages を先に呼ぶのでこれは正しく処理されますが、トレースが about:blank を報告した場合はこれが原因です。

自分の Chrome を使う

デフォルトでは、サーバーは独自の Chrome を起動します。すでに起動している Chrome にアタッチすることもできます。

• --autoConnect は、chrome://inspect/#remote-debugging でリモートデバッグを有効にした後、Chrome 144 以降に接続します。
• --browserUrl http://127.0.0.1:9222 は、--remote-debugging-port=9222 を付けて起動した Chrome に接続します。

普段使いのブラウザにアタッチすると、エージェントはログイン情報、Cookie、開いているタブを利用できるようになります。サインインが必要なページをデバッグしたいときにはこれが狙いどおりの動作ですが、それ以外の場面ではリスクになります。そのため、専用の Chrome プロファイルを使ってください。

プライバシーと安全性

このサーバーは起動時に警告を表示します。その内容は「ブラウザインスタンスのコンテンツを MCP クライアントに公開し、ブラウザや DevTools 内のあらゆるデータを検査・デバッグ・変更できるようにする」というものです。これは文字どおりに受け取ってください。変更する価値のあるデフォルト設定が 3 つあります。

• 使用統計は、--no-usage-statistics を指定しない限り Google に送信されます。CI 環境変数が設定されている場合もオフになります。
• CrUX ルックアップ: パフォーマンスツールは、トレースした URL を Google の CrUX API に送信する場合があります。社内 URL やステージング URL には --no-performance-crux を使用してください。
• プロファイル: デフォルトのプロファイルは永続化されます。セッション間で状態を保持する必要がない限り、--isolated を使用してください。

evaluate_script はページ内で JavaScript を実行します。また、ページにはモデルを狙ったテキストが含まれている可能性があります。未知のサイトへのナビゲーションはご自身で承認してください。また、1.13.0 では、クライアントがワークスペースルートを共有していない場合、保存したトレースやスクリーンショットなどのファイルの読み書きがシステムの一時フォルダに制限されることに気づきました。--allow-unrestricted-paths を指定するとこの制限が解除されます。このオプションは指定しないでください。詳細は MCP セキュリティ をご覧ください。

Chrome DevTools MCP と Playwright MCP

どちらのプロジェクトも比較記事を公開していないため、この使い分けは当社独自の見解です。エージェントの目的がサイトを操作することなら Playwright MCP、サイトがそのように動作する理由を理解することなら Chrome DevTools MCP が適しています。両者は併用でき、もう一方の詳細は Playwright MCP ガイド で解説しています。

動作しない場合

当カタログに掲載されている Chrome DevTools サーバーとそのチェックスコアは、このページの上部に一覧で示されています。