Dev Containers内でChrome DevTools MCPを実行してホストのChromeを参照させたい

何がしたいの

なんか最近Chrome DevTools MCPとやらがすごく話題じゃないですか。私も試してみたいと思い立ったわけですが、できれば普段開発しているコンテナ上で実行させたい。仮想環境以外にNode入れたくない…どうにかならないの？
というわけで、とりあえずこの方法でやりました。

環境

• ホストマシン
  • npx無し
  • Chromeブラウザあり
• Dev Containers
  • npxあり

ホストのChromeをRemote Debugモードで起動

コンテナ上のChrome DevTools MCPがホストのChromeを参照できるようにする。
ホストOSのターミナルで以下を実行。

open -na "Google Chrome" --args \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/hoge

これでホストマシン上のlocalhost:9222でChromeを参照できるようになる。

Dev ContainersにMCPを導入

ホストのmcp.jsonに記述するとnpxが無いことで実行できないので、Dev Containers上で動作させるためにdevcontainer.jsonへ以下を記述する。

{
  "name": "local",
// 一部省略
  "customizations": {
    "vscode": {
      "settings": {
        "mcp": {
          "inputs": [],
          "servers": {
            "chrome-devtools": {
              "command": "npx",
              "args": [
                "chrome-devtools-mcp@latest",
                "--browserUrl=http://{ホストのIPアドレス}:9222" // ここについては後述
              ]
            }
          }
        }
      }
    }
  }
}

保存したらRebuild Containerする。

補足：--browserUrlについて

Dockerコンテナからホストマシンを参照するとき、通常はhost.docker.internalなどが使えるが、Chrome側のセキュリティでIPアドレス直指定かlocalhost以外でアクセスされた際には接続できないようになっている。
ここでlocalhostとするとコンテナを指してしまうため、ホストマシンのIPアドレスを指定する必要がある。
今回はVScodeでコンテナに接続したうえで、以下のようにしてIPアドレスを確認した。

$ curl -v host.docker.internal
*   Trying {ここにIPアドレスが表示される}:80...
* Connected to host.docker.internal ({ここにIPアドレスが表示される}) port 80 (#0)

動作確認

CopilotをAgentモードにして、「google.comのLCPをチェック」と送ってみる。

こんな感じのレスポンスが来たら多分動いてる。

終わり

もっといい方法あるんじゃないかという気がしないではない（おとなしくNode入れろというツッコミは無しで）