Chrome DevTools MCPをClaude Codeで使う導入手順と計測の自動化

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

Claude Codeへの追加はclaude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latestの1行です。WebMCPを試すなら、起動オプションに--categoryExperimentalWebmcp=trueを足します。

先に知っておきたいのは、ツール一覧に載っている機能の多くが既定では使えないことです。メモリ調査・拡張機能・PWA・WebMCPはそれぞれ追加のフラグが要ります。導入手順より先に、どの機能にどのフラグが要るかを押さえておくと、「ツールが見えない」で迷いません。

何ができて、何に前提条件があるか

ツールリファレンスには、カテゴリごとのツール数が載っています。このうち既定で使えるカテゴリと、フラグが要るカテゴリを分けると次のとおりです。

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

Claude Codeに追加する

MCPサーバーとしてだけ使うなら、claude mcp addの1行で済みます。Claude Code向けの手順はこの形です。

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

--scopeを省くと既定はlocalです(Claude Code v2.1.287のclaude mcp add --helpで確認)。チームで同じ設定を共有したいときは--scope projectにすると、実行したディレクトリの.mcp.jsonに書き込まれます。起動オプションをつけてprojectで追加した結果は次のとおりです。

claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --slim --headless

{
  "mcpServers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--slim",
        "--headless"
      ],
      "env": {}
    }
  }
}

--の後ろが丸ごとサーバーの起動コマンドになり、オプションはargsに並びます。.mcp.jsonのサーバーは、承認するまで「Pending approval」として扱われ、接続されません。これもv2.1.287のclaude mcp --helpの記載です。

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つのトレース用ツールで進みます。

アクセシビリティ・SEO・ベストプラクティス・エージェント向けブラウジング(agentic browsing)のスコアが欲しいときはlighthouse_auditを別に呼びます。このツールにパフォーマンスは含まれず、パフォーマンスは上のトレースで見る分担です。deviceでdesktopとmobile、modeでnavigation(リロードして監査)とsnapshot(現在の状態を解析)を選べます。

計測を使ってWebアプリの表示速度を詰めた事例は、claude.aiの高速化の2週間で読めます。

トレースの条件はemulateで変えられます。

emulateにはこのほか、userAgentの差し替えとextraHttpHeadersでのヘッダー追加もあります。これらをperformance_start_traceと組み合わせれば、「Slow 3G・CPU4倍低下でのLCP」のように、手元の高速な環境では出ない条件を再現できます。

通信とコンソールの異常を調べる

list_network_requestsは直近のナビゲーション以降のリクエストを返します。resourceTypesでXHRや画像に絞れ、pageSizeとpageIdxでページ送りもできます。直近3回のナビゲーション分まで見たいときはincludePreservedRequests: trueです。個別の中身はget_network_requestが返し、CookieヘッダーやSet-Cookieも確認できます。

コンソールはlist_console_messagesで一覧し、includeStackTraces: trueでスタックトレースが付きます。evaluate_scriptでページ内のJavaScriptを実行して状態を見ることもでき、返り値はJSONにできる形に限られます。

メモリリークを調べる前に必要なフラグ

ヒープ解析は、つまずきやすい箇所です。take_heapsnapshotは既定で使えます。ただし、2つのスナップショットを比べるcompare_heapsnapshotsや、保持経路を調べるget_heapsnapshot_retaining_pathsなど13個は、ツールリファレンスで--memoryDebugging=trueが必要と書かれています。フラグなしで比較しようとしても、該当ツールがそもそも見えません。

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

流れは、リークが疑われる操作の前後でtake_heapsnapshotを2回呼び(filePathに.heapsnapshotファイルを指定)、compare_heapsnapshotsで差分を見る形です。クラス単位の差分が出るので、増え続けているオブジェクトの当たりがつきます。

拡張機能・PWA・実験機能を使う

拡張機能の自動操作は--categoryExtensions=trueで有効になります。対象はinstall_extension / list_extensions / reload_extension / trigger_extension_action / uninstall_extensionの5つです。インストールにはアンパック済み拡張機能のフォルダを絶対パスで渡します。PWAのinstall_pwa / launch_pwa / uninstall_pwa / get_os_app_stateは--categoryPwa=trueです。PWAはパイプ接続専用で、拡張機能も現状パイプ接続のみです(設定ドキュメントは149のリリースで他の接続方式にも対応する旨を書いています)。autoConnect・browserUrl・wsEndpointで既存のChromeにつなぐ構成では、現状どちらも動きません。

実験機能も2つあります。--categoryExperimentalThirdParty=trueは、ページ自身が公開する開発者向けツールをexecute_3p_developer_toolで呼べるようにします。呼び出し前にlist_3p_developer_toolsで一覧を取る流れです。--categoryExperimentalWebmcp=trueは、WebMCPツールのlist_webmcp_toolsとexecute_webmcp_toolを有効にします。設定ドキュメントによれば、Chrome 150以降と--enable-features=WebMCPのChromeフラグが前提です。Claude Codeでは次のように追加します。

claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest --categoryExperimentalWebmcp=true

MCPサーバー側のフラグに加えて、Chrome側のフラグも必要です。

複数タブとログイン状態の分離

list_pagesでタブを一覧し、select_pageで以降の呼び出しの対象を切り替えます。new_pageのisolatedContextに名前を付けると、同じ名前のタブはCookieとストレージを共有し、別名のタブとは完全に分離されます。ログイン済みの状態と未ログインの状態を並べて検証したいときの手段です。

プロファイル全体を使い捨てにするなら--isolatedです。終了時に片付く一時ユーザーデータで起動します。省略時のプロファイルは$HOME/.cache/chrome-devtools-mcp/chrome-profileに保存されるので、前回のログイン状態が残ります。

ツールを絞る・既存のChromeにつなぐ

--slimを付けると、公開されるツールはnavigate・evaluate・screenshotの3つだけになります。ページを開いてスクリーンショットを撮るだけの自動化に向き、--headlessとの組み合わせが公式READMEの例です。--categoryPerformance=falseのようにカテゴリ単位で外すこともできます。

すでに起動しているChromeを操作するには2通りあります。--autoConnectはChrome 144以降が対象で、chrome://inspect/#remote-debuggingでリモートデバッグを有効にしておきます。デバッグ用ポートで起動したChromeには--browserUrl http://127.0.0.1:9222でつなぎます。

Playwright MCPとの使い分け

Playwright MCPも同じくブラウザを自動操作しますが、設計の重心が違います。

Core Web VitalsやLighthouseスコアを見ながら調整するならChrome DevTools MCP、Firefoxも含めたE2E自動化ならPlaywright MCPが向きます。両方を同時に有効にして使い分けても構いません。Claude Codeから見れば、どちらもclaude mcp addで並べて登録できる別々のMCPサーバーです。

送信されるデータと、ブラウザの中身が見えることの扱い

利用統計は既定で有効です。ツール呼び出しの成功率・レイテンシ・環境情報がGoogleに送られ、--no-usage-statisticsか環境変数CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICSで止められます。CI環境変数が設定されている環境では収集されません。パフォーマンスツールはトレースのURLをGoogleのCrUX APIに送ることがあり、止めるには--no-performance-cruxです。

もう1つは、ブラウザに表示している内容がMCPクライアントから検査・変更できる点です。READMEは、共有したくない情報をMCPクライアントに渡さないよう注意しています。リスクを下げる設定として、設定ドキュメントには次のオプションがあります。

• --redactNetworkHeaders: 機微とみなすネットワークヘッダーを伏せて返す(既定はfalse)
• --javascriptEvaluation=false: evaluate_scriptなどJavaScript実行系を無効にする
• --fileNavigations=false: file:URLへの遷移を拒否する(ただしファイルシステムのサンドボックスではなく、全面的に隔離するにはOS側のサンドボックスが必要と注記されています)

起動しないときの切り分け

症状別に、トラブルシューティングに載っている原因をまとめます。

プラグインのインストールがFailed to clone repositoryで落ちるのは、github.comの443番ポートへ届かない環境です。回避策は2つあり、SSH経由に置き換えるgit config --global url."git@github.com:".insteadOf "https://github.com/"か、claude mcp addによるCLI導入です。後者はSkillsが入らない点に注意が必要です。

Chrome 149までは、凍結・アンロード済みのタブが接続トラブルの原因になりえます。DevTools MCPは全タブを強制的に読み込むため、数百タブのブラウザでの利用は推奨されていません。起動時のログは--logFileで保存でき、NODE_DEBUG=*を併用すると詳細になります。npmレジストリの更新確認は、環境変数CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKSで止められます。

まとめ

ツール一覧の数だけを見て導入すると、メモリ解析や拡張機能が使えずに戸惑います。使いたい機能を先に決め、そこから起動オプションを選ぶ順序が、設定の手戻りを減らします。

ChromeのコンソールログをClaude Codeから読む方法はClaude CodeでChromeのコンソールログをデバッグするにあります。MCP追加の一般手順はClaude Code MCP設定ガイドです。フレームワーク側が公開する同種のMCPサーバーでは、Next.js MCPサーバーをClaude Codeで使う設定ガイドが開発サーバーの内部状態を読む例です。