Chrome DevTools MCPでClaude Codeのパフォーマンス計測を自動化する

Chrome DevTools MCPは、Google Chrome DevToolsチームが公開する公式MCPサーバーです。Claude Codeからライブのブラウザを操作し、パフォーマンストレースの記録・Lighthouse監査・ネットワークリクエスト解析・メモリヒープスナップショットまでを、Chrome DevTools本来の機能をそのまま呼び出す形で実行できます。npmパッケージ名はchrome-devtools-mcpで、内部はPuppeteerでの自動操作を基盤にしています。

Chrome DevTools MCPとは何ができるか

このサーバーの役割は大きく3つに分かれます。1つ目はパフォーマンス計測で、performance_start_traceでトレースを記録し、Core Web Vitals(LCP・INP・CLS)を含むインサイトを抽出します。2つ目はブラウザデバッグで、コンソールメッセージ・ネットワークリクエスト・スクリーンショットをソースマップ付きで取得できます。3つ目はPuppeteerベースの操作自動化で、クリック・入力・フォーム送信をアクションの完了を自動待機しながら実行します。

対応ブラウザはGoogle ChromeとChrome for Testingのみが公式サポート対象です。他のChromium系ブラウザでも動く可能性はありますが、動作保証の対象外になります。Node.jsはLTSバージョン、Chromeは現行の安定版以上が必要です。

Claude Codeに追加する

MCPサーバーとしてだけ使う場合はclaude mcp addの1行で追加できます。

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

Chrome DevToolsチームはこれとは別に、MCPサーバーとSkillsをまとめて配布するプラグイン形式も公式に用意しています。Skillsまで使う場合はこちらが推奨経路です。

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

インストール後はClaude Codeの再起動が必要です。/skillsでSkillsが読み込まれているか確認できます。以前にCLI経由でインストール済みの場合は、プラグイン版を入れる前に既存の設定を削除しておく必要があります。

パフォーマンストレースを記録して読む

パフォーマンス計測は3つのツールで完結します。まずnavigate_pageで対象URLへ遷移し、続けてperformance_start_traceでトレースを開始します。reload: trueを指定すると、開始と同時にページをリロードして初回読み込みの計測ができます。

https://developers.chrome.comのパフォーマンスを確認して

計測が終わるとperformance_stop_traceで記録を止め、Core Web Vitals(LCP・INP・CLS)を含む「Insight sets」が返ります。個々のインサイト(例: DocumentLatencyやLCPBreakdown)を掘り下げたい場合はperformance_analyze_insightにinsightNameとinsightSetIdを渡すと、原因の詳細説明が得られます。アクセシビリティ・SEO・ベストプラクティスのスコアが欲しい場合はlighthouse_auditを別途呼びます(パフォーマンス項目は含まれないため、両方を使い分けます)。

ネットワークとコンソールの調査

list_network_requestsは直近のナビゲーション以降のリクエストを一覧表示し、resourceTypesでXHRや画像などに絞り込めます。個別リクエストの詳細はget_network_requestで取得でき、CookieヘッダーやSet-Cookieディレクティブも確認可能です。コンソール側はlist_console_messagesで一覧を取り、includeStackTraces: trueを付けるとスタックトレース付きで返ります。JavaScriptを直接実行して状態を確認したいときはevaluate_scriptが使え、返り値はJSONシリアライズ可能な形に限られます。

デバイスとネットワークのエミュレーション

emulateツールは1回の呼び出しで複数の条件をまとめて指定できます。

これらはperformance_start_traceと組み合わせると、「3G回線・CPU4倍低下でのLCP」のような実機に近い条件でのパフォーマンス計測ができます。

拡張機能とメモリリークの調査

既定では無効ですが、--categoryExtensions=trueを付けるとChrome拡張機能の自動操作ツール(install_extension / list_extensions / reload_extension / trigger_extension_action / uninstall_extension)が使えるようになります。未パッケージの拡張機能をパスで指定してインストールし、動作確認からアンインストールまでを一連の流れで自動化できるのは、他の汎用ブラウザ自動化MCPには少ない機能です。ただしこの機能はパイプ接続でのみ対応しており、autoConnect・browserUrl・wsEndpoint経由の接続では使えません。

メモリ調査はtake_heapsnapshotでスナップショットを取得し、compare_heapsnapshotsで前後2つを比較する流れです。メモリリークが疑われる操作の前後でスナップショットを取り、差分を見ればどのクラスのオブジェクトが増え続けているかを特定できます。

複数タブとPWAの操作

list_pagesで開いているタブを一覧し、select_pageで以降のツール呼び出しの対象タブを切り替えます。new_pageにはisolatedContextという名前付きコンテキストを指定でき、同じコンテキスト内のタブはCookieとストレージを共有する一方、別コンテキストのタブは完全に分離されます。ログイン状態を汚さずに未ログイン状態のテストを並行させたいときに使えます。

Progressive Web Appの検証も既定では無効ですが、--categoryPwa=trueを付けるとinstall_pwa / launch_pwa / uninstall_pwa / get_os_app_stateが使えるようになります。こちらもパイプ接続専用で、autoConnectやbrowserUrl経由では動作しません。

実験的な機能 — サードパーティツールとWebMCP

--categoryExperimentalThirdParty=trueを付けると、ページ自身が公開する実行時情報取得ツールをexecute_3p_developer_toolから呼べるようになります。React DevToolsのような、ページ側に埋め込まれた開発者ツールをMCP経由で操作する用途を想定した機能です。同様に--categoryExperimentalWebmcp=trueは、ページがWebMCP仕様で公開するツールをexecute_webmcp_toolから実行できるようにします。どちらも実験段階の機能で既定では無効ですが、Webページ自身がエージェント向けツールを公開する流れに沿った拡張です。

フルモードとslimモードの使い分け

既定では全ツールが有効になりますが、基本的なブラウザ操作だけで十分な場合は--slimで軽量化できます。

--slim --headlessを組み合わせると、画面表示なしで最小構成のツールセットだけを起動できます。カテゴリ単位で絞りたい場合は--categoryPerformance=falseのように機能群ごとに無効化するオプションも用意されています。ブラウザプロファイルを使い捨てにしたい場合は--isolatedを付けると、終了時に自動でクリーンアップされる一時プロファイルで起動します。動作がおかしいときは--logFileでログをファイルに出力し、DEBUG=*環境変数と合わせるとバグ報告に使える詳細ログが取れます。

Playwright MCPとどちらを使うか

同じくPuppeteer/Playwright系でブラウザを自動操作するMCPサーバーとしてPlaywright MCPがありますが、設計の重心が異なります。

Core Web VitalsやLighthouseスコアを見ながらチューニングしたい場合はChrome DevTools MCPが本題に直結します。逆にFirefoxやWebKitも含めた横断的なE2E自動化が目的なら、Playwright MCPのほうが対応範囲が広くなります。両方を同時に有効化して使い分けても構いません。

使用統計とプライバシーの注意

Chrome DevTools MCPは既定でツール呼び出しの成功率・レイテンシ・環境情報などの利用統計をGoogleに送信します。無効化するには起動引数に--no-usage-statisticsを追加するか、環境変数CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICSを設定します。CI環境ではCI環境変数が立っていれば自動的に収集が止まります。加えてパフォーマンスツールは、実ユーザーの体感データを補うためトレースURLをGoogleのCrUX APIへ送信することがあり、これは--no-performance-cruxで止められます。ブラウザに表示している内容はMCPクライアント側から検査・変更可能になるため、機密情報を扱っているタブでの利用は避けたほうが安全です。

よくあるつまずき

プラグインインストールが「Failed to clone repository」で失敗する

社内プロキシなどHTTPS接続に制限がある環境でよく起こります。公式トラブルシューティングガイドに回避策があり、それでも解決しない場合はCLI経由(claude mcp add)のインストールに切り替えます。

autoConnectが効かない

既存で起動中のChromeに自動接続する--autoConnectはChrome 144以降が対象で、Chrome側でchrome://inspect/#remote-debuggingからリモートデバッグサーバーを起動しておく必要があります。バージョン要件を満たしていないと接続できません。

更新通知が煩わしい

既定でnpmレジストリを定期的にチェックし、新バージョンが出るとログに通知を出します。止めたい場合は環境変数CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKSを設定します。

まとめ

Chrome DevTools MCPは、claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latestの1行、またはプラグイン形式でClaude Codeに追加できるGoogle公式のMCPサーバーです。パフォーマンストレースとLighthouse監査を軸に据えている点がPlaywright MCPとの分かれ目で、Core Web Vitalsの改善やDevTools相当の詳細デバッグが目的ならこちらが本題に近くなります。利用統計の既定送信とブラウザ内容の検査可能性は、導入前に把握しておく価値があります。ChromeのコンソールログをClaude Codeから直接読む方法はClaude CodeでChromeのコンソールログをデバッグする、MCP追加の一般手順はClaude Code MCP設定ガイドで扱っています。