목록 · 개발·코드

Chrome DevTools MCP

한국어 가이드레지스트리 미등록

구글 크롬 팀이 만든 공식 서버입니다. 크롬을 실제로 열어 화면을 누르고, 콘솔 오류와 네트워크 요청을 읽고, 성능을 측정합니다. 만든 화면을 '봤다'고 말할 수 있게 해 주는 도구입니다.

설치하기

설정 파일에 세 줄을 넣으면 끝납니다. 터미널을 몰라도 됩니다.

설정 파일을 엽니다.

Windows%APPDATA%\Claude\claude_desktop_config.json

macOS~/Library/Application Support/Claude/claude_desktop_config.json

파일이 없으면 새로 만드십시오. 메모장이나 텍스트 편집기면 충분합니다.
아래 내용을 붙여 넣고 저장합니다.
```
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest"
      ]
    }
  }
}
```
이미 mcpServers가 있다면 그 안쪽에 항목만 추가하십시오. 중괄호를 두 번 쓰면 오류가 납니다.
Claude 앱을 완전히 껐다가 다시 켭니다. 창만 닫으면 반영되지 않습니다. Windows는 작업 표시줄 아이콘에서 종료, macOS는 Cmd+Q로 완전히 끄십시오. 이 단계를 빠뜨려서 안 된다고 하는 경우가 가장 많습니다.

안 되면 도구 아이콘이 보이는지부터 확인하십시오. 안 보이면 JSON 문법 오류일 가능성이 가장 큽니다. 오류 점검 8가지에 증상별로 정리해 두었습니다.

먼저 알아 둘 것

설치는 한 줄인데 두 가지가 먼저 있어야 합니다. Node.js LTS 버전과 크롬 정식 버전입니다. 엣지나 웨일 같은 다른 크로미움 계열은 공식 지원이 아니라 예상 밖으로 동작할 수 있습니다. 그리고 이 서버는 브라우저에 열려 있는 내용을 모델에게 그대로 넘깁니다. 로그인된 은행 창이나 사내 시스템을 띄워 둔 채로 쓰지 마십시오. 별도 프로필이나 새 창에서 쓰는 편이 안전합니다. 깃허브 별 48,855개로 MCP 서버 중 가장 많습니다.

공식 사이트에서 계정 만들기

제휴 관계가 없는 일반 링크입니다.

Chrome DevTools MCP

설치하기

먼저 알아 둘 것

함께 보면 좋은 도구