chrome-devtools-mcp を試したら

Cursor インストール

ボタンを押すだけ

なんかよくなさそうなステータス

画面に出ているコマンドを叩いてみる

### Macの環境の Nove のバージョンが v20.11.0 で良くないっぽい
$ npx -y chrome-devtools-mcp@latest 
ERROR: `chrome-devtools-mcp` does not support Node v20.11.0. 
Please upgrade to Node 20.19.0 LTS or a newer LTS.


### バージョン変わらず。やり方間違えてたのかな
$ node -v
v20.11.0
$ brew upgrade node
〜〜〜〜〜
$ node -v
v20.11.0


### node の場所を確認
$ which -a node
/Users/〜/.volta/bin/node
/Users/〜/.nodenv/shims/node
/usr/local/bin/node
/Users/〜/.volta/bin/node
/Users/〜/.nodenv/shims/node


### 一番最初に volta が表示されているので、volta に合わせる
$ node -v      
v20.11.0
$ volta install node@20.19.0
success: installed and set node@20.19.0 (with npm@10.8.2) as default
$ node -v                   
v20.19.0

やっと叩ける

$ npx -y chrome-devtools-mcp@latest 
chrome-devtools-mcp exposes content of the browser instance to the MCP clients allowing them to inspect,
debug, and modify any data in the browser or DevTools.
Avoid sharing sensitive or personal information that you do not want to share with MCP clients.


### 動くけどインストールからやりたかったので、以下を実施
$ npm install -g chrome-devtools-mcp
added 176 packages in 10s
29 packages are looking for funding
  run `npm fund` for details

### npx -y とか叩いてた時と同じ感じになる
$ chrome-devtools-mcp
chrome-devtools-mcp exposes content of the browser instance to the MCP clients allowing them to inspect,
debug, and modify any data in the browser or DevTools.
Avoid sharing sensitive or personal information that you do not want to share with MCP clients.


### 出力結果を mcp.json に記述
$ which chrome-devtools-mcp


### 別ターミナルで chorme を起動
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --no-first-run --no-default-browser-check

cursor のタブで指示をすると動く

が、めちゃめちゃ重い。カス。