Chrome DevTools MCPサーバーでAIエージェントからブラウザの中身を確認できるようにする

どうも！オペ部の西村祐二です！

Chrome DevTools MCPサーバーは、AIコーディングエージェントがブラウザ上のWebページを直接デバッグできるMCPサーバーです。2025年9月にパブリックプレビューとして公開され（2026年3月現在もパブリックプレビュー段階です）、スクリーンショット取得やDOM検査といった基本機能はその時点から利用できました。

2026年3月10日にリリースされたChrome 146のタイミングでWhat's new in DevToolsでも紹介され、注目度が上がっています。直近のv0.18.0〜v0.19.0のアップデートでLighthouse統合やアクセシビリティ監査などが追加され、実用性が大きく向上しました。

Chrome DevTools MCPサーバーとは

• 概要: AIコーディングエージェントがChrome DevToolsの機能にアクセスし、ブラウザ上のWebページを直接デバッグできるMCPサーバー
• 公開日: 2025年9月23日（パブリックプレビュー）
• 公式リンク: Chrome DevTools MCP、GitHub

パブリックプレビュー以降もアクティブに開発が続いており、直近の主なアップデートは以下の通りです。

※ リリース日はCHANGELOGに基づきます

注目ポイント

1. AIエージェントからブラウザの中身を確認できる

   • AIコーディングエージェントは、生成したコードがブラウザでどう表示されるか確認できないのが課題でした。DevTools MCPサーバーを導入すると、パフォーマンストレース、ネットワーク診断、コンソールログ確認、DOM/CSS検査をエージェントが直接実行できるようになります

2. --autoConnectでログイン済みセッションに接続可能

   • Chrome M144（2026年1月安定版リリース）で追加された--autoConnectオプションを使うと、新しいChromeインスタンスを起動するのではなく、普段使っているログイン済みのChromeセッションにそのまま接続できます。認証が必要なページのデバッグや、手動テストとエージェント操作の切り替えが容易になります

試してみる

Chrome DevTools MCPサーバーのセットアップ

Chrome DevTools MCPサーバーは、MCPクライアント（Claude Code、Cursor、VS Code Copilotなど）から利用できます。

Claude Codeの場合

ターミナルでコマンドを1つ実行するだけでセットアップが完了します。ログイン済みのChromeセッションに接続したい場合は--autoConnectを付けてください（詳細は次のセクションで説明します）。

# 基本
claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest

# ログイン済みセッションに接続する場合
claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest --autoConnect

追加後、Claude Codeを再起動（/exitして再度起動）し、/mcpコマンドでchrome-devtoolsがconnectedになっていることを確認します。

その他のMCPクライアント（Cursor、VS Code Copilotなど）の場合

設定ファイル（.mcp.jsonなど）にMCPサーバーの定義を追加します。--autoConnectを使う場合はargsに追加してください。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--autoConnect"]
    }
  }
}

ログイン済みChromeセッションへの接続（--autoConnect）

--autoConnectオプションを使うと、普段使っているChromeセッション（ログイン状態やCookieを含む）にそのまま接続できます。認証が必要なアプリのデバッグ時に、再ログインが不要になります。

1. Chrome側でリモートデバッグを有効化する

Chrome（144以上）で chrome://inspect/#remote-debugging を開き、受信デバッグ接続を許可します。

2. MCPサーバーに--autoConnectを追加する

前のセクションで--autoConnect付きでセットアップ済みの場合、この手順は不要です。--autoConnectなしで追加済みの場合は、先に削除してから再追加します。

# Claude Codeの場合
claude mcp remove chrome-devtools
claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest --autoConnect

// その他のMCPクライアントの場合、argsに"--autoConnect"を追加
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--autoConnect"]
    }
  }
}

Claude Codeの場合は再起動後、/mcpコマンドでchrome-devtoolsがconnectedになっていれば接続成功です。

3. 接続を許可してスクリーンショットを撮ってみる

Claude Codeに「今開いてるページのスクショ撮って」などと指示すると、Chrome側に許可ダイアログが表示されます。「許可する」をクリックして接続を許可してください。

許可ダイアログが表示される

接続中は「Chrome is being controlled by automated test software」というバナーが表示されます。スクリーンショットが返ってくれば、DevTools MCPが正常に動作しています。

Claude Codeでスクリーンショットを取得してもらった例

なお、取得したスクリーンショットはClaude Codeの会話内に表示されるだけで、ファイルとしては保存されません。画像を残したい場合は「デスクトップに保存して」と追加で指示すると、ファイルとして書き出してくれます。

v0.19.0の追加機能：Lighthouse監査を試す

v0.19.0で追加されたLighthouse統合により、Claude Codeから直接Lighthouse監査を実行できるようになりました。

試しに下記を入力してみました。

このページのLighthouse監査を実行して
https://dev.classmethod.jp/

アクセシビリティ、SEO、ベストプラクティスなどのスコアとともに分析結果が返ってました。これまでDevToolsのLighthouseパネルを手動で開いて実行していた作業を、エージェント経由で完結できます。

Chrome DevTools MCPサーバーでこんなこともできる

Lighthouse以外にも、Claude Codeに対して以下のようなプロンプトで指示を出せます。

たとえば開発中のWebアプリでレイアウト崩れが起きた場合、従来はブラウザとエディタを行き来しながら原因を探る必要がありました。

DevTools MCPがあれば、Claude Codeに「このページのスクショ撮って、崩れてる箇所のCSSを調べて修正案を出して」と指示するだけで、スクリーンショット取得→DOM検査→修正コード提案まで一連の流れをエージェントが実行できます。

試してみた感想

• DevTools MCPサーバーはnpxで即座にセットアップできるため、すでにMCPクライアントを使っているなら導入は簡単かなと思いました。Lighthouse監査をエージェント経由で実行できるのは、いろいろ幅が広がりそうです。
• --autoConnectによるログイン済みセッションへの接続は、認証が必要なWebアプリの開発時にとても便利です。毎回ログインし直す手間がなくなり、エージェントにスクリーンショット取得やDOM検査を依頼できるのは開発フローの改善になりそうです。
• 一方で、セキュリティ面（プロンプトインジェクション、ツールチェーン経由のデータ漏洩、破壊的操作の制御）はまだ未解決として認識されている段階です。特に--autoConnectはログイン済みセッションにアクセスできるため、利用するページの選択には注意が必要です

セキュリティ上の注意点

DevTools MCPサーバーを利用する際には、セキュリティ面のリスクも把握しておく必要があります。

--autoConnectのリスク

--autoConnectはログイン済みのChromeセッション（Cookie、セッショントークン含む）にAIエージェントがフルアクセスできる機能です。便利な反面、以下のリスクがあります。

• 銀行、管理画面、社内ツールなど機密性の高いページが開いていた場合、意図せずその内容をAIに読み取られる可能性があります。
• AIの応答はAPI経由で送られるため、ページの内容がモデルプロバイダに送信されます。機密情報がページ上にある場合、外部に漏洩するリスクがあります。

DevTools MCP全般のリスク

• DOM操作、JavaScript実行、ネットワークリクエストの傍受など、DevToolsでできることはすべてエージェントも実行できます。
• 悪意あるページのコンテンツがプロンプトインジェクションとして作用し、エージェントが意図しない操作を行うリスクがあります。

対策の例

公式のベストプラクティスは今後整備されていくと思いますが、現時点で個人的に意識しておきたい点を挙げます。

• Chromeプロファイルを分ける: 開発用のプロファイルを作成し、本番環境の認証情報が入ったプロファイルでは--autoConnectを使わないようにします。
• --autoConnectなしで使う: 新規Chromeインスタンスを起動する（デフォルトの挙動）ほうが安全です。認証が不要なページのデバッグであればこちらで十分です。
• 作業中のタブを意識する: --autoConnectを使う場合は、機密情報を含むタブを閉じてから接続します。

まとめ

Chrome DevTools MCPサーバーは2025年9月のパブリックプレビュー以降、継続的にアップデートが続いています。

直近のv0.18.0〜v0.19.0ではLighthouse統合やアクセシビリティ監査スキルが追加され、実用性が大きく向上しました。セットアップはコマンド1つで完了し、スクリーンショット取得、DOM検査、Lighthouse監査など、これまで手動で行っていたデバッグ作業をエージェントに任せられます。--autoConnectを使えばログイン済みセッションにもそのまま接続できますが、セキュリティリスクを理解した上で利用してください。

誰かの参考になれば幸いです。

関連リンク:

• Chrome DevTools MCP — Chrome for Developers
• Let your Coding Agent debug your browser session — Chrome for Developers
• What's new in DevTools (Chrome 146)
• ChromeDevTools/chrome-devtools-mcp — GitHub
• CHANGELOG — GitHub