Chrome DevTools MCPで現在開いてるブラウザを操作可能になったので試してみました

はじめに

https://developer.chrome.com/blog/chrome-devtools-mcp-debug-your-browser-session?hl=ja

2025/12/11
にGoogleが提供しているChrome DevTools MCPで更新がありました。

今回の更新でアクティブブラウザをMCPから操作できるとのことなので
作業してる途中にAIに操作を代行してもらえるようになったので
試しに使ってみました。

必要なもの

• この機能を試すには、ChromeのCanary版が必要です。（2025/12/16時点）以下のリンクからダウンロードしておきましょう。
• Google Chrome Canary
  Canary版をインストールしたら、リモートデバッグを有効にしておく必要があります。

有効方法

キャリー版のクロームで

chrome://inspect#remote-debugging

にアクセスして、「Allow remote debugging for this browser instance」をチェックし
serverがたちがることを確認してください

MCPの設定

お好きなAIエージェントツールで
下記を設定してください。

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

今回自分はGemini CLIを利用しました。
最初はAntigravityを利用していたのですが、MCP権限周りがややこしかったので諦めました

---

利用してみる

とりあえずキャリーのクローム上でzennにログインして、マイページのダッシュボードを開いてみました

このよく読まれるリストを取得してもらいます
自然言語で指示してみました

最初の操作のみクロームのほうでダイアログが出てくるので許可します

要素を取得してどれが言ってるものか探してくれてますね

ちゃんと内容をとってくれました。

記事を書かせてみる

次は下記プロンプトで記事を書かせてみました

# メイン指示

- 開いているブラウザのzennのタブから投稿ボタンを押し、記事を代理で記載

# 必須事項

- マークダウン形式で記載
- タイトルは興味を引くキャッチなー形

# 記事内容

- https://developer.chrome.com/blog/chrome-devtools-mcp-debug-your-browser-session?hl=ja のURLで紹介されている現在のブラウザのセッションでChrome DevTools MCPを使い、ブラウザ操作をする記事
- 2025/12/16時点ではキャリー版でのみできるので、 https://www.google.com/chrome/canary/ からダウンロードしておくことを前提として記載
- gemini cliを使い指示したことを記載

記事の文言精査せずやったので後で文面は直してますが、ちゃんと記事の文言を考え入力してくれました

ただ問題点としては途中で文言がきれてしまっていました。
入力しながら記事の内容うめていってたので、途中でタイムアウトしたためです
これは指示の仕方でなんとかなりそうなので、問題なしかとは思います

さいごに

これが通常版にも実装されるようになればログイン情報などは
AIに渡さず、特定の面倒な作業だけ好きなエージェントでてきるみたいな未来が今度ありそうですね
ChatGPT Atlasがまだmac版のみなので、windowsの方は代用でこれを使ってみることをお勧めします