サービスServices制作実績Works自社ツールToolsブログBlogチームTeam会社概要Company
お問い合わせ
Chrome DevTools MCPを解説する記事のサムネイル画像
← ブログ一覧
AI7分

Chrome DevTools MCPとは？Claude Codeにブラウザを触らせて動作確認したCLIツールの記録

  • #Chrome DevTools MCP
  • #MCP
  • #Claude Code

Claude CodeのようなAIコーディングエージェントは、コードを書くのは得意でも「実際にブラウザで動かして確認する」工程は苦手でした。その隙間を埋めるのが、GoogleのChrome DevToolsチームが公開しているMCPサーバー「chrome-devtools-mcp」です。MCP（Model Context Protocol）経由でAIエージェントに実際のChromeを操作させ、スクリーンショット・コンソールログ・ネットワークリクエスト・パフォーマンストレースまで取得できるようにする、という位置づけのツールです。

この記事では公式リポジトリ（https://github.com/ChromeDevTools/chrome-devtools-mcp ）のREADMEとドキュメントを一次情報としつつ、実際にnpxでサーバーを起動し、MCPクライアントを自前のNode.jsスクリプトで書いて接続し、ツール一覧の取得やページ操作、スクリーンショット取得までをこの検証環境の中で試した結果をまとめます。

  • この記事でわかること：chrome-devtools-mcpが何をするツールで、なぜGoogle公式が出しているか。
  • Claude Code側での導入方法（CLIコマンドとプラグイン方式の2通り）。
  • 実際にMCPハンドシェイクを行い、29個のツールが返ってきたこと、その内訳。
  • `navigate_page` や `take_screenshot` がページIDを要求する仕様と、実際に踏んだエラー。
  • 既定で有効なCrUX連携・使用状況の収集と、それぞれの無効化オプション。

Chrome DevTools MCPとは

公式リポジトリの説明によれば、chrome-devtools-mcpは「AIコーディングエージェントに実際に動いているChromeを制御・検査させる」ためのMCPサーバーです。Claude、Cursor、GitHub Copilotなど複数のMCPクライアントから使うことを想定していて、Anthropic製のClaude専用ツールではなく、Google Chrome DevToolsチームが自ら公開・保守している点が特徴です。README上部には「chrome-devtools-mcp exposes content of the browser instance to the MCP clients allowing them to inspect, debug, and modify any data in the browser or DevTools.」という注意書きがあり、実際にサーバーを起動すると起動時ログにもこの文言がそのまま表示されます。ブラウザの中身をエージェントに丸ごと渡す仕組みだ、という前提を最初に理解しておく必要があります。

ライセンスはApache-2.0。Node.jsのLTS版と、安定版（stable）以降のChromeがあれば動きます。一部の機能（`--autoConnect` によるローカルChromeへの自動接続など）は「Chrome 144以降」が前提と明記されていました。

導入方法（npxとClaude Code設定）

インストール不要でその場で試せるのがnpxコマンドです。

  • そのまま起動: `npx -y chrome-devtools-mcp@latest`
  • 軽量モード: `npx -y chrome-devtools-mcp@latest --slim --headless`（ナビゲーション・スクリプト実行・スクリーンショットの3ツールのみに絞る）

Claude Codeへの組み込みは、公式ドキュメントのクライアント設定ガイドに2通り書かれています。1つはMCPサーバーとして登録するだけのCLIコマンド `claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest`。もう1つは、MCPサーバーに加えてスキルもまとめて入れるプラグイン方式で、`/plugin marketplace add ChromeDevTools/chrome-devtools-mcp` でマーケットプレイスを追加し、`/plugin install chrome-devtools-mcp@chrome-devtools-plugins` でプラグインを入れ、Claude Codeを再起動して `/skills` で確認する、という手順です。プラグイン方式のインストールが失敗する場合はCLIコマンドの方を使うようトラブルシューティングガイドで案内されています。

実際にMCPサーバーを起動してみる

まず `npx -y chrome-devtools-mcp@latest --help` を実行し、実在するnpmパッケージであること、`--headless` `--isolated` `--executablePath` `--channel` `--slim` などのオプションが本当に存在することを確認しました。次に、この検証環境にPlaywright用として入っていたChromiumバイナリを `--executablePath` で指定し、標準入出力でJSON-RPCをやり取りする最小限のMCPクライアントを自分でNode.jsスクリプトとして書いて、実際にサーバーへ接続してみました。

  • 起動コマンド（要旨）: `chrome-devtools-mcp --executablePath <ローカルのChromium> --headless --isolated --chromeArg=--no-sandbox --no-usage-statistics`
  • `initialize` への応答: `serverInfo` は `{ name: "chrome_devtools", title: "Chrome DevTools MCP server", version: "1.9.0" }`
  • `tools/list` は既定設定で29個のツールを返した（Input automation・Navigation・Emulation・Performance・Network・Debuggingの6カテゴリ分）

ここで最初に踏んだのが `navigate_page` のエラーです。URLだけ渡すと「Invalid arguments for tool navigate_page: Required at pageId」と返ってきました。既定で `--pageIdRouting` が有効になっているため、ページを操作する系のツールはすべて明示的な `pageId` を要求する仕様だと分かります。`list_pages` を呼ぶと `"## Pages\n1: about:blank [selected]"` という、JSONではなく人間（というよりLLM）が読みやすいプレーンテキストが返ってきました。この `1` を数値としてそのまま `pageId` に渡すと、今度は「Expected number, received string」で型エラー。文字列の `"1"` ではなく数値の `1` を渡す必要がありました。ドキュメントを読むだけでは気づきにくい、実際に叩いてみて初めて分かる仕様です。

pageIdを数値で渡し直したところ `navigate_page` は通りましたが、この検証環境はネットワーク送信先が許可リストで制限されているため、`https://example.com` への遷移自体は `net::ERR_TUNNEL_CONNECTION_FAILED` で失敗しました。これはこの検証環境固有の制約であり、ツールの不具合ではありません。それでも続けて `take_screenshot` を呼ぶと、エラーページの状態のままではありますが実際にPNG画像（約12万バイトのBase64データ）がMCP経由で返ってきて、ブラウザ起動・ページ制御・画像取得というパイプライン自体は最後まで動くことを確認できました。

既定では無効なツールカテゴリと計測設定

`--help` の出力を見ると、Memory（`take_heapsnapshot` などヒープスナップショット系）、Extensions（拡張機能のインストール・実行）、Third-party（ページが自ら提供する開発者向けツールの実行）、WebMCP、Progressive Web Apps（PWAのインストール・起動）の5カテゴリは既定では無効で、`--categoryExtensions` や `--categoryPwa` のようなフラグで明示的に有効化する必要があります。README上ではExtensionsとPWAは「pipe接続でのみサポートされ、`autoConnect` / `browserUrl` / `wsEndpoint` では使えない」という制約も明記されていました。

計測面では2つの既定オンの仕組みに注意が必要です。1つはパフォーマンストレースのURLをGoogleのCrUX APIに送って実ユーザーの計測データを取得する機能で、`--no-performance-crux` で無効化できます。もう1つはツールの呼び出し成功率やレイテンシなどの使用状況統計の収集で、`--no-usage-statistics` フラグか `CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS` 環境変数で無効化できます（`CI` 環境変数が立っている場合は自動的に無効化されるとも明記されていました）。どちらも公式ドキュメントにオプトアウト手段が明記されているとはいえ、既定でオンになっている点は導入前に知っておいたほうがよい仕様です。

まとめ

実際に動かした範囲では、chrome-devtools-mcpは「エージェントにDevToolsの目を持たせる」という説明どおりの動きをしていました。ページ操作系のツールがすべて `pageId` を要求する設計、結果がJSONではなくLLM向けのテキストで返ってくる作り、拡張系カテゴリが既定オフでpipe接続限定という制約など、READMEを読むだけでは実感しにくい部分を手元で確認できたのは収穫でした。

Claude Codeから使う場合は `claude mcp add` 一発、あるいはプラグイン方式でスキルも含めて導入できるので、フロントエンドの見た目確認やパフォーマンス計測をエージェントに任せたい場面では試す価値があります。一方で「ブラウザの中身をそのままMCPクライアントに渡す」設計である以上、認証情報が残ったプロファイルで接続する際の扱いは慎重に検討する必要があります。

参考リンク

関連記事

まずは、やりたいことを聞かせてください

「何から手をつければいいか分からない」段階でも大丈夫です。 ご相談・お見積りは無料。碧南近郊なら直接伺います。

お問い合わせ090-1742-3456