Chrome DevTools MCP
Chrome DevToolsのMCP、フロントエンドエンジニアは絶対に入れたほうが良い。かなり良い。ブラウザにしか出ないエラーをAIエージェントが勝手に吸い上げて対応をしてくれる。 pic.twitter.com/CKWZdegYxc
— zaru (@zaru) 2025年9月26日
npxはwhich npx してasdf配下のnpxを設定とかした
nodeのバージョンが20.19以上必要とのことで、プロジェクトのnodeのバージョンかえるわけにもいかないので、ASDF_NODEJS_VERSIONを指定した。
"chrome-devtools": { "command": "/Users/username/.asdf/shims/npx", "args": ["-y", "chrome-devtools-mcp@latest"], "env": { "ASDF_NODEJS_VERSION": "22.16.0" } }
が、うまくいかない。
とりあえずコマンド実行できるのかを試す。nodeのバージョンのせいかもなので下げてみた上で。
ASDF_NODEJS_VERSION=20.19.5 /Users/username/.asdf/shims/npx -y chrome-devtools-mcp@latest --help 2>&1 | head -30
エラーはこんな感じ
throw new ERR_MODULE_NOT_FOUND(
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/username/.npm/_npx/15c61037b1978c83/node_modules/zod-to-json-schema/dist/esm/index.js' imported from /Users/username/.npm/_npx/15c61037b1978c83/node_modules/@modelcontextprotocol/sdk/dist/esm/server/mcp.js
at finalizeResolution (node:internal/modules/esm/resolve:283:11)
at moduleResolve (node:internal/modules/esm/resolve:952:10)
at defaultResolve (node:internal/modules/esm/resolve:1188:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:708:12)
at #cachedDefaultResolve (node:internal/modules/esm/loader:657:25)
at ModuleLoader.resolve (node:internal/modules/esm/loader:640:38)
at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:264:38)
at ModuleJob._link (node:internal/modules/esm/module_job:168:49) {
code: 'ERR_MODULE_NOT_FOUND',
url: 'file:///Users/username/.npm/_npx/15c61037b1978c83/node_modules/zod-to-json-schema/dist/esm/index.js'
結論、npxのキャッシュクリアするといけた。
npx clear-npx-cache
これでnpxのキャッシュクリアして、コマンド実行できた
ASDF_NODEJS_VERSION=20.19.5 /Users/username/.asdf/shims/npx -y chrome-devtools-mcp@latest --help 2>&1 | head -30
結果はこう、helpがちゃんと出てくれる
Options:
-u, --browserUrl Connect to a running Chrome instance using port forwarding. For more details see: https://developer.chrome.com/docs/devtools/remote-debugging/local-server. [string]
--headless Whether to run in headless (no UI) mode. [boolean] [default: false]
-e, --executablePath Path to custom Chrome executable. [string]
--isolated If specified, creates a temporary user-data-dir that is automatically cleaned up after the browser is closed. [boolean] [default: false]
~~~
（省略）
~~~
で、Cursorを再起動したら、いけた！
nodeのバージョンも22.16.0で出来たから、nodeのバージョンは関係なかった
