普段 DevContainer で開発している中で DevTools MCP を使いたいが、 Chrome が入っていないコンテナから利用するには設定が必要なのでそのメモ。ホスト側の Chrome を使うようにする。
基本的な設定方法は DevTools MCP の README に書かれていて、DevContainer 専用ではないが --browser-url というオプションに remote debugging port を有効にした Chrome を指定することが出来る。
remote debugging port は 136 以降で --user-data-dir オプションを兼用しないと有効にできなくなっている。
今回は Chrome を普段遣いのものとは別で開きたかったので、すべてまとめると次のコマンドで MCP から利用する Chrome を起動できる。Raycast の Script Commnad として適当に登録した。
$ open -n -a "Google Chrome" --args --remote-debugging-port=9222 --user-data-dir=/tmp/devtools-mcpChrome が起動したらコンテナ側から接続するホスト側の IP を調べる。host.docker.internal でアクセスできそうだが、Chrome 側の制約で拒否されてしまった。
$ getent hosts host.docker.internal
> 0.250.250.254 host.docker.internalちなみにコンテナから curl を投げてみるとこんな感じになる:
$ curl http://host.docker.internal:9222/json/version
Host header is specified and is not an IP address or localhost.%
$ curl -H "Host: localhost" http://host.docker.internal:9222/json/version
{
"Browser": "Chrome/142.0.7444.60",
"Protocol-Version": "1.3",
"User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36",
"V8-Version": "14.2.231.14",
"WebKit-Version": "537.36 (@e7848b4d5b3843432464a9b8237fe58e87f6c357)",
"webSocketDebuggerUrl": "ws://localhost/devtools/browser/9e8b5696-17d3-4b14-82cf-1f5975b571b7"
}
$ curl http://0.250.250.254:9222/json/version
{
"Browser": "Chrome/142.0.7444.60",
"Protocol-Version": "1.3",
"User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36",
"V8-Version": "14.2.231.14",
"WebKit-Version": "537.36 (@e7848b4d5b3843432464a9b8237fe58e87f6c357)",
"webSocketDebuggerUrl": "ws://0.250.250.254:9222/devtools/browser/9e8b5696-17d3-4b14-82cf-1f5975b571b7"
}これを引数に起動するように .mcp.json などを調整する。自分は Claude Code を使っているので、Plugin としてこの設定を install 出来るようにした。
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--browserUrl=http://0.250.250.254:9222"
]
}
}
}設定がうまく行っていれば次のような適当なコマンドを実行すると、ホスト側の Chrome が動いて確認できるはず。
chrome-devtools を使って yaakai.to の Core Web Vitals を測定して 
