🐣

Chrome DevTools MCPをmiseから実行

に公開
VS Code
DevTools
Copilot
Model Context Protocol
mise
tech

モチベーション

Chrome DevTools MCPの記事を読んだので試しに導入してみようと思ったのですが、以下の課題がありました。

  • Chrome DevTools MCPを使うにはNodeのバージョンは22.12.0以上が必要だが、あるプロジェクトではNodeのバージョンが18.18.2（そもそもサポート切れのバージョンを利用しているのがまずいのは理解しています・・・）
  • 別のプロジェクトではNodeのバージョンは問題ないがmiseを利用しており https://developer.chrome.com/blog/chrome-devtools-mcp?hl=ja に書かれている npx chrome-devtools-mcp@latest を実行すると chrome-devtools を実行するために必要なコマンド "npx" が見つかりませんでした。 というエラーになる

これらを解決している事例を探したのですが見つけられなかったため、試行錯誤して見つけた解決策を共有します。

前提

  • VS CodeのGitHub Copilot（エージェントモード）からChrome DevTools MCPを利用する
  • mise を利用

Chrome DevTools MCPって？

自分が参考にした記事のリンクを貼り付けておきます。

解決策

古いNodeを利用しているプロジェクトでChrome DevTools MCPを利用する方法

miseを利用しているため、Chrome DevTools MCPのみNode22.12.0以上を利用するアプローチです。具体的にはmcp.jsonに以下のように記述しました。

{
  "servers": {
    "chrome-devtools": {
      "command": "mise",
      "args": [
        "x",
        "npm@11.6.0",
        "--",
        "mise",
        "x",
        "node@22.16.0",
        "--",
        "npx",
        "chrome-devtools-mcp@latest"
      ]
    }
  }
}

node@22.16.0を指定しただけではnpxがこのリポジトリーで元々利用していたnode@18.18.2を利用しようとしエラーになったためnpmのバージョンも指定しています。また、npmとnodeの順番を入れ替えた場合もエラーになりました（上記の順番だとなぜエラーにならないのかは理解できていません）。

miseを利用しているプロジェクトでChrome DevTools MCPを利用する方法

直接npxを実行しようとするとエラーになっため、miseを利用しnpxを実行するようにしました。

{
  "servers": {
    "chrome-devtools": {
      "command": "mise",
      "args": ["x", "npm", "--", "npx", "chrome-devtools-mcp@latest"]
    }
  }
}

また、このリポジトリーではpnpmを利用していたため（npmを利用していなかったため）、このままではMCPサーバー起動時にエラーになってしまいました。mise install npm@latest でnpmをインストールすることでエラー解消しました。

おまけ：リポジトリー毎にChrome DevTools MCP起動コマンドを変える方法

グローバルな（ユーザー単位の）mcp.jsonはWindowsの場合$env:APPDATA/Code/Userに作成することになりますが、リポジトリー毎に設定を変更したい場合は該当のリポジトリーの <RootDir>/.vscode/mcp.json に定義するといいです。

Discussion