白猫のメモ帳

C#とかJavaとかJavaScriptとかHTMLとか機械学習とか。

Chrome DevTools MCPでちょっとハマったので備忘録

AIエージェント

こんばんは。
Sora2が盛り上がってますね。
面白いけど、ウォーターマークがないと見分ける自信がもうないです。

さて、先日Chromeの公式から「Chrome DevTools MCP」が公開されましたね。
これまではブラウザ操作のMCPといえば「Playwright MCP」がほぼ一強という感じでしたが、便利だと話題になっているので使ってみようと思います。

github.com

Node.jsを最新化する

Node.jsはv20.19以上を要求されるので更新しましょう。
私はv20.18.3でギリギリ足りませんでした。

$ node -v
v20.18.3

nvmが簡単なのでおすすめです。
nvmのインストール方法などはここでは説明しませんが、nvmがインストール済みならこんな感じですね。

# 現在のバージョンを確認
$ nvm current
# 最新のバージョンをインストール
$ nvm install
# 最新のバージョンを利用
$ nvm use v24.9.0

MCPの設定をする（Codex）

最近よく使っているのがCodexなのでまずはCodexの設定をします。
基本的にはこんな感じの設定をするらしいので、

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

これをconfig.tomlに設定します。TOMLに変換してこんな感じかなと思ったら、

[mcp_servers.chrome-devtools]
command = "npx"
args = ["-y", "chrome-devtools-mcp@latest"]

Chromeが見つかりませんよというエラーになってしまいました。
公式リポジトリを見ると、Windows11ではこう設定するらしいです。
32bitだとパスが変わったりするかも。

[mcp_servers.chrome-devtools]
command = "cmd"
args = [
    "/c",
    "npx",
    "-y",
    "chrome-devtools-mcp@latest",
]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

MCPの設定をする（Cline/Roo Code）

もう一つ、Clineでも試してみます。
Clineの場合はmcp.jsonに設定する感じですね。

で、記載の通りこのまま設定すると、

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

やっぱり、Chromeが見つかりませんよというエラーになってしまいました。
公式リポジトリにオプションが書いてあるので、--executablePath（-e）オプションを使ってみます。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "-e=C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe"
      ]
    }
  }
}

こんな感じにすると動きました。

つまり

公式リポジトリをちゃんと読もうということですね。
ここに書いた設定もいつまでうまくいくかはわかりません。

もし設定がうまくいかなくてこのページにたどり着いたのであれば、公式リポジトリをちゃんと読みましょう。
私からお伝えしたいことはそれだけです。