https://madogiwa0124.hatenablog.com/entry/2026/01/14/225412

DevcontainerでChrome DevTools MCPを使うときにホスト側のChrome デバッグモードで起動してipアドレス指定でホスト側もChromeに接続したり、UbuntuベースのDevcontainer環境にGoogle Chromeを入れるの、リポジトリや権限周りでつまずきやすくめどくさいなぁと思っていたのですが、

多少ChromiumとChromeの互換性の問題が出たとしてもコンテナ内で完結できるメリットもありそうに感じ、Chrome DevTools MCPをコンテナ内でinstall済みのChromiumに接続できないかと思い試したら出来たのでメモしておきます📝。

本題

Devcontainer上でChrome DevTools MCPはインストール済みなことが前提で、主に必要な対応は以下でした。

Devcontainerイメージにchromiumを追加
start-chromium-mcp.shでChromium(headless)を--remote-debugging-port=9222で起動し、chrome-devtools-mcpを--browser-urlで接続
devcontainer.jsonのMCPサーバー設定をスクリプト実行に変更（ホストChrome依存の設定を撤廃）

これにより、ブラウザ起動からMCP接続までをDevcontainer内で完結でき、ホスト側のChromeを立ち上げたりしなくてもMCP経由でAI AgentがChrome DevToolsにアクセスしてくれるようになりました。

実装例・コード

1) Dockerfile（Chromiumの導入）

# .devcontainer/Dockerfile（抜粋）
RUN apt-get update && apt-get install -y \
    chromium

Devcontainer（Debian/Ubuntu系）を想定し、chromiumをAPTで追加しています。

2) DevcontainerのMCP設定（スクリプトに委譲）

// .devcontainer/devcontainer.json（抜粋）
{
  "customizations": {
    "vscode": {
      "settings": {
        "mcp.servers": {
          "io.github.ChromeDevTools/chrome-devtools-mcp": {
            "type": "http",
            "config": {
              // Google Chrome DevToolsをChromiumで使うための設定
              "command": "/app/.devcontainer/scripts/start-chromium-mcp.sh",
              "env": {}
            }
          }
        }
      }
    }
  }
}

コンテナ上のchromiumをurl指定で起動してMCPに設定する/app/.devcontainer/scripts/start-chromium-mcp.shを呼び出します。

3) 起動スクリプト（Chromium + MCP）

# .devcontainer/scripts/start-chromium-mcp.sh
#!/usr/bin/env bash
set -e

PORT=9222

# Chromium が未起動なら起動
if ! curl -sf http://127.0.0.1:${PORT}/json/version > /dev/null; then
  chromium \
    --headless \
    --no-sandbox \
    --disable-gpu \
    --remote-debugging-port=${PORT} \
    about:blank \
    >/tmp/chromium.log 2>&1 &

  # DevTools endpoint 起動待ち
  for i in {1..20}; do
    if curl -sf http://127.0.0.1:${PORT}/json/version > /dev/null; then
      break
    fi
    sleep 0.2
  done
fi

# UUID を直接扱わず browser-url で接続
exec npx chrome-devtools-mcp@latest \
  --browser-url http://127.0.0.1:${PORT}

おわりに

多少ChromiumとChromeの互換性の問題があるかもしれませんが、自分のローカルでは今のところはいい感じっぽい？ので、これで使ってみて様子見してみようと思います🫡

参考リンク

qiita.com

github.com