vscode에 chrome-devtools-mcp 연결하기

 

프론트엔드 공부하다가 디버깅을 좀 더 쉽게 하기 위해서 

chrome-devtools-mcp 를 설치해서 사용하려고 한다. 

 

 

대략적인 기능은 아래와 같음. 

 

 

 

 

이 mcp는 node로 서버를 돌리기 때문에, node가 설치되어있어야한다. 

(node 설치만 해두면 나머지는 mcp가 알아서함)

 

chrome-devtools-mcp 실행 방법

1. cmd+shift+p 를 누르고 MCP:List Server를 클릭

2. 리스트 중 `chrome-devtools-mcp` 를 선택해서 실행

 

 

하지만 나는 output 창에서 에러가 나왔다. 

읽어보니 노드 버전이 낮아서 그렇다고 함. 

 

근데 이상한게 터미널에서는 분명히 node v24.x 쓰고 있다고 나오는데

vscode에서 mcp 실행할때만 v20.x 쓰고 있다고 나온다. 

 

 

 

 

Node 버전 에러 해결 방법

 

mcp가 서버를 실행할때 명령어를 통해서 강제적으로 v24버전을 쓰도록 명령해야한다. 

 

1. cmd+shift+p 를 누르고 MCP: Open User Configuration 클릭 후 mcp.json 진입

2. servers 쪽을 아래와 같이 수정했다. 

       - 터미널에서 `which npx` 로 나온값을  "command" 값에 추가

       -  "args"에 아래와 같이 추가

 

3. 꼭 vscode 껐다가 키기!!!

 

 

chrome-devtools-mcp 실행 결과

Check the performance of  https://developers.chrome.com

 

chat에서 위 문구로 테스트해보면 퍼포먼스 테스트도 알아서 하고, 페이지도 잘 캡쳐하는것을 볼수있다. 

 

나는 내 개발 페이지에서 카테고리를 클릭하고, 콘솔에 찍힌 로그를 가져오라고 요청했는데 

알아서 잘 가져왔다 짝짝짝 👏👏👏👏

 

 

 

 

결론

아주 유용하게 잘 쓸 것 같다. 다만 간단한 테스트는 내가 하는게 더 빨라서, 좀 무거운 업무? 위주로 사용해야겠다. 

 

+ 생각해보니 나는 왜 vscode를 쓰고있었을까?....codex 때문이였나...?

cursorAI에도 codex가 있는걸 보니 다시 cursorAI로 넘어가야겠다!