Chrome DevTools MCPでの既存セッションへの接続が楽になっていきそう

この記事は LIFULL Advent Calendar 2025 の15日目の記事です。

背景

Chrome DevTools MCPを利用すると基本的にはブラウザの新規セッションが立ち上がりますが、下記のブログ記事によると既存のセッションへの接続がしやすくなるようにアップデートが進んでいるようです。

事前にセッション内でログインをしておいたり、問題が起きたセッションでデバッグに移行することもスムーズになり、コーディングエージェントを利用した開発も捗りそうです。

試し方

基本的には元の記事に記載されている通りです。

事前準備

Chromeの通常版にはまだ組み込まれておらず、Chrome Canary でバージョン145を利用する必要があります。

12月14日時点で下記のバージョンで確認することができました。

Chrome は最新の状態です
バージョン 145.0.7577.0（公式ビルド）canary （arm64）

Chromeの設定

Chrome Canaryを開き、chrome://inspect/#remote-debugging から設定を有効化します。

この状態で、別のタブでqiitaのURLを開いてログイン作業を行いました。

コーディングエージェントの設定

私はkiro-cliを利用しましたが、基本的に何を使っても大きな違いはないと思います。下記のように設定を加えます。

mcp.json

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

CLIからチャットを起動して、簡単な指示を出します。

> このページのファーストビューのスクリーンショットを取得して https://qiita.com/nanakenashi

下記のようなダイアログが表示されるので「許可する」を選択します。

その後少しやり取りをして、下記のスクリーンショットが保存されました。見づらいのですが、右上にログイン画面ではなくアバターが表示されており、既存のセッションを利用できたことがわかります。

むすび

従来もChromeをリモートデバッグモードで起動しておきMCPからそのURLに接続するということはできていたようですが、公式にサポートされることでよりスムーズに作業が進みそうです。Chromeの通常版でも利用できるようになるのを待ちたいと思います。