今回は、2025年12月現在Chrome Canary版で先行公開されているChrome DevTools MCPの拡張される機能について実際に試し、何ができるのか、どう設定するのかを検証してみました。
今回の内容は12/11にChromeの開発者向けのページで紹介されていた内容をもとにしています。
リリースが2026年2月の予定(バージョン145に追加予定)のようなので、機能の変更や設定方法の変更などがある可能性がある点はご了承ください。また、ブラウザを便利に操作するための機能ではなく開発者向けに提供される予定の機能となっており、外部からの操作や任意のURLへの遷移なども許可されます。そのため日常的にブラウザを便利に使用するための機能ではないことを理解した上で使用することが必要です。
Chrome DevTools MCPについて
Chrome DevTools MCPはAIエージェントからChromeを操作を行えるようにして、結果を確認したりエラーを確認できるツールです。開発時の問題解決をAIで行うために、実際のブラウザの実行結果を参照を容易にするものです。
紹介されているブログはこちら
追加される機能の概要
今回紹介されている内容はChromeに追加される機能で、Chrome DevTools MCP用に拡張される設定です。具体的には今開いているブラウザに対してAIエージェント側から操作ができるようになるというものです。これまでは、使う際に新しくこれまで使用しているブラウザとは別のブラウザを起動する動きになっていたので、ログインしている状態などを維持することがそのままではできませんでした。そのためログインが必要なサイトで試そうとすると、ログインする操作などをAIに指示する必要がありました。
今回の機能の拡張で、すでに開いているブラウザを操作することができるようになります。
※設定で機能を有効にしたブラウザに対して行うので、無条件に操作を受け入れるものではないので仮にリリースされてもこの機能があるからアップデートを行わないなどは不要になります。
試す方法
1.ダウンロード
2025年12月現在はChromeのChanary版でのみ利用可能となっています。試す際は以下のリンク先からダウンロードいただけます。
2.設定の有効化
設定の有効化には以下のURL先のページでChromeの設定を変更する必要があります。
ブラウザのアドレスバーに以下のURLを入れて遷移することができます。
chrome://inspect/#remote-debugging
開いたページは以下のようなページです。
こちらの「Allow remote debugging for this browser instance」のチェックボックスにチェックをつけると有効化されます。チェックをつけると以下のようにリクエストを受け付けていることを示すIPアドレスとポート番号が表示されます。
注意文言に書いてあるとおり、現在は拒否するか全ての操作を受け入れるかのどちらかしかないのであくまで開発用に使用する目的で提供される機能であることを忘れないでください。
3.AIエージェント側の設定
今回はGeminiCLIで実行しました。
GeminiCLIの設定は~/.gemini/の中のsettings.jsonにあり、そちらに以下のコードを追記する。
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--autoConnect",
"--channel=canary"
]
}
}
--channel=canaryはChromeのリリース管理上付けられているもので、正式リリースになればなくなる設定だと思われます。
4.GeminiCLIの起動
geminiとコマンドを入れてGeminiCLIを通常通り起動する。
MCPの設定が正しく記述できていれば、以下のように表示されます。
操作結果
画面遷移(Googleの画面の表示)
入力
googleのページを表示して
出力
╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ? new_page (chrome-devtools MCP Server) {"url":"https://www.google.com"} ← │
│ │
│ MCP Server: chrome-devtools │
│ Tool: new_page │
│ │
│ Allow execution of MCP tool "new_page" from server "chrome-devtools"? │
│ │
│ ● 1. Yes, allow once │
│ 2. Yes, always allow tool "new_page" from server "chrome-devtools" │
│ 3. Yes, always allow all tools from server "chrome-devtools" │
│ 4. No, suggest changes (esc) │
│ │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
遷移を許可
遷移を許可すると最初、ブラウザの画面に以下のようなポップアップが表示されます。
許可するを押すと画面遷移が実行される。
ブラウザのアドレスバーの下には操作されていることを示すことが表示されています。
画面の項目を取得(Xのアカウントの情報を取得)
事前にログインしておいた状態が維持されるかを確認します。
入力
X.comに遷移した後のプロフィールページにアクセスして、アカウントのアカウント名やフォロワー数など情報を整理してください。
出力
一気に画面の遷移やデータが取得されるわけではなく、クリックの許可であったり通信結果の取得など操作の種類ごとに許可が求められる動きとなります。
╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ? select_page (chrome-devtools MCP Server) {"pageIdx":2} ← │
│ │
│ MCP Server: chrome-devtools │
│ Tool: select_page │
│ │
│ Allow execution of MCP tool "select_page" from server "chrome-devtools"? │
│ │
│ ● 1. Yes, allow once │
│ 2. Yes, always allow tool "select_page" from server "chrome-devtools" │
│ 3. Yes, always allow all tools from server "chrome-devtools" │
│ 4. No, suggest changes (esc) │
│ │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ? take_snapshot (chrome-devtools MCP Server) {} ← │
│ │
│ MCP Server: chrome-devtools │
│ Tool: take_snapshot │
│ │
│ Allow execution of MCP tool "take_snapshot" from server "chrome-devtools"? │
│ │
│ ● 1. Yes, allow once │
│ 2. Yes, always allow tool "take_snapshot" from server "chrome-devtools" │
│ 3. Yes, always allow all tools from server "chrome-devtools" │
│ 4. No, suggest changes (esc) │
│ │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ? click (chrome-devtools MCP Server) {"uid":"1_20"} ← │
│ │
│ MCP Server: chrome-devtools │
│ Tool: click │
│ │
│ Allow execution of MCP tool "click" from server "chrome-devtools"? │
│ │
│ ● 1. Yes, allow once │
│ 2. Yes, always allow tool "click" from server "chrome-devtools" │
│ 3. Yes, always allow all tools from server "chrome-devtools" │
│ 4. No, suggest changes (esc) │
│ │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ? take_snapshot (chrome-devtools MCP Server) {} ← │
│ │
│ MCP Server: chrome-devtools │
│ Tool: take_snapshot │
│ │
│ Allow execution of MCP tool "take_snapshot" from server "chrome-devtools"? │
│ │
│ ● 1. Yes, allow once │
│ 2. Yes, always allow tool "take_snapshot" from server "chrome-devtools" │
│ 3. Yes, always allow all tools from server "chrome-devtools" │
│ 4. No, suggest changes (esc) │
│ │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
現在設定されている情報は以下の通りです。
* アカウント名: ぽーん/551
* 自己紹介: プログラミングやアニメが好きなエンジニアです。 フォローしていただけると嬉しいです。
* Qiita: https://qiita.com/ho-rai
* SpeakerDeck: https://speakerdeck.com/pawn_4_s
* note: https://note.com/pawn_note
* 場所: 日本
* ウェブサイト: https://pawn-4-git.github.io/profile/
* 利用開始: 2014年8月からXを利用しています
* フォロー中: 629
* フォロワー: 203
表示速度の確認
入力
プロフィールページの表示速度を教えてください
出力
╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ? performance_start_trace (chrome-devtools MCP Server) {"reload":true,"autoStop":true} ← │
│ │
│ MCP Server: chrome-devtools │
│ Tool: performance_start_trace │
│ │
│ Allow execution of MCP tool "performance_start_trace" from server "chrome-devtools"? │
│ │
│ ● 1. Yes, allow once │
│ 2. Yes, always allow tool "performance_start_trace" from server "chrome-devtools" │
│ 3. Yes, always allow all tools from server "chrome-devtools" │
│ 4. No, suggest changes (esc) │
│ │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
I have run a performance trace on your profile page.
Here's the key display speed metric:
* Largest Contentful Paint (LCP): 1512 ms
LCP is a Core Web Vital that measures when the largest content element on the page becomes visible. A score of 1512 ms means it took
approximately 1.5 seconds for the main content of your profile page to load and become visible to the user.
Would you like me to look into any specific insights to help optimize this score, or any other performance metrics? I have access to
detailed LCP breakdown, CLS culprits, network dependency tree, font display, and third-parties insights.
・日本語訳
プロフィールページのパフォーマンストレースを実行しました。
主な表示速度指標は以下の通りです：
* Largest Contentful Paint (LCP): 1512 ms
LCPはCore Web Vitalの一つで、ページ上で最も大きなコンテンツ要素が表示されるまでの時間を測定します。1512ミリ秒というスコアは、プロフィールページのメインコンテンツが読み込まれ、ユーザーに表示されるまでに
約1.5秒かかったことを意味します。
このスコアやその他のパフォーマンス指標を最適化するための具体的な分析項目について、ご要望はございますか？
詳細なLCPの内訳、CLS（コンテンツレイアウトシフト）の原因、ネットワーク依存ツリー、フォント表示、サードパーティ関連の分析データにアクセス可能です。
安全に使うために
この機能は強力であるがゆえに、取り扱いには注意が必要です。設定がオンになっている間は、理論上AIエージェントからの操作をすべて受け付ける状態になります。 検証が終わったら、必ず chrome://inspect/#remote-debugging の設定画面に戻り、チェックを外して無効化することをお勧めします。また、ブラウザを再起動することでもセッションは切断される仕様のようです。
まとめ
今回は、Chromeに追加されるChrome DevTools MCPの拡張された機能を試しました。
実際に触ってみて、AIエージェントが単なるコード生成だけでなく、実際のブラウザ操作や実行結果の解析まで行えるようになることで、E2Eテストやデバッグの工数が劇的に下がる可能性を感じました。特にすでに開いているブラウザで行うことで、これまで手間だった部分を解消できる可能性があります。
2026年2月のリリースに向けて、自動テストに関心のあるエンジニアの皆さんは、ぜひ今のうちからCanary版で機能を試してみてはいかがでしょうか。