Chrome DevTools MCP
성능 트레이스와 힙 스냅샷까지 여는 크롬 MCP
npx -y chrome-devtools-mcp@latestChrome DevTools 팀이 만든 MCP 서버입니다. 페이지 조작을 넘어 콘솔 메시지와 네트워크 요청, 성능 트레이스, 힙 스냅샷까지 에이전트가 읽습니다. 가벼운 작업만 필요하면 slim 모드로 도구 수를 줄일 수 있습니다.
판단
이럴 때 씁니다
- 무엇이 느린지 에이전트가 성능 트레이스를 읽고 짚게 하고 싶을 때
- 메모리 누수를 힙 스냅샷으로 추적해야 할 때
- 콘솔 오류와 네트워크 요청을 스택 트레이스까지 함께 봐야 할 때
- PWA 동작이나 여러 파일 업로드처럼 브라우저 고유 기능을 다뤄야 할 때
이럴 땐 쓰지 마세요
- 크롬이 아닌 브라우저에서 검증해야 할 때
- 단순한 클릭과 입력만 필요해 도구 수를 줄이고 싶을 때. 이 경우 slim 모드를 먼저 검토합니다
- 브라우저를 띄울 수 없는 환경일 때
차별점
- Chrome DevTools 팀이 직접 만들어 브라우저 내부 데이터에 그대로 닿습니다.
- 성능 트레이스와 힙 스냅샷을 도구로 열어 진단 작업을 에이전트에 맡길 수 있습니다.
- slim 모드로 도구 수를 줄여 컨텍스트 부담을 조절합니다.
- PWA 자동화와 다중 파일 업로드 같은 브라우저 고유 동작을 지원합니다.
워크플로
- 01MCP 클라이언트 설정에 npx -y chrome-devtools-mcp@latest 를 등록합니다.
- 02가벼운 작업만 필요하면 인자에 --slim 과 --headless 를 더해 도구 수를 줄입니다.
- 03에이전트가 페이지를 열고 성능 트레이스를 기록한 뒤 병목 구간을 지목하게 합니다.
- 04메모리 문제는 힙 스냅샷을 찍고 요약과 엣지를 훑는 순서로 좁힙니다.
주요 명령
| 명령 | 설명 |
|---|---|
npx -y chrome-devtools-mcp@latest | MCP 서버를 실행합니다. 클라이언트 설정의 command 로 넣습니다. |
npx -y chrome-devtools-mcp@latest --slim --headless | 기본 조작만 남기고 도구 수를 줄여 실행합니다. |
함정
설치 전에 확인하세요
- 메모리 관련 도구는 --memoryDebugging 플래그를 켜야 나타납니다.
- 페이지 범위 도구는 기본적으로 pageId 를 요구하도록 바뀌었습니다. 예전 예제를 그대로 쓰면 인자 오류가 납니다.
- @latest 로 고정하지 않으면 클라이언트가 캐시된 예전 버전을 계속 쓸 수 있습니다.
비교
Playwright MCP 와 겹치는 영역은 페이지 조작뿐입니다. 이쪽의 값어치는 왜 느린지, 무엇이 메모리를 붙잡고 있는지를 데이터로 답하게 하는 데 있습니다. 대신 도구가 많아 세션 시작 때 컨텍스트를 더 씁니다. 두 서버를 동시에 켜기보다 목적에 따라 하나를 고르는 편이 낫습니다.
최근 변경
1.8.0 에서 힙 스냅샷을 질의하는 query_heapsnapshot 도구와 컨텍스트가 붙잡고 있는 메모리를 요약에 표시하는 기능을 추가했습니다. 콘솔 메시지에 스택 트레이스를 선택적으로 붙일 수 있게 됐고 PWA 자동화 도구도 들어왔습니다. 페이지 범위 도구는 기본적으로 pageId 를 요구하도록 바뀌었으니 기존 설정을 확인해야 합니다.