browser-inspector-mcp

AI 코딩 도구에 브라우저 DevTools와 동일한 CSS 가시성을 제공합니다.

AI가 CSS를 작성하기 전에 브라우저에 실제로 무엇이 있는지(실제 렌더링된 클래스 이름, 전체 규칙 캐스케이드, 무엇이 적용되고 있는지와 그 이유)를 확인하게 하세요. 사람이 DevTools에서 얻는 데이터와 동일합니다. 수동 복사-붙여넣기가 전혀 필요 없습니다.

전체 문서 및 시각 자료 →

요구 사항: Node.js 18+, MCP 호환 AI 도구(Claude Code, Cursor, Windsurf, Cline 등), 실행 중인 로컬 개발 서버.

설정 (AI 도구의 MCP 설정 파일에 추가):

{
  "mcpServers": {
    "browser-inspector": {
      "command": "npx",
      "args": ["-y", "browser-inspector-mcp"]
    }
  }
}

설정 파일 위치:

• Claude Code: ~/.claude.json

• Cursor: ~/.cursor/mcp.json 또는 .cursor/mcp.json

• Windsurf: ~/.codeium/windsurf/mcp_config.json

• 기타: 도구가 MCP 서버 설정을 읽는 곳

AI 도구를 다시 시작하세요. 첫 호출 시 AI에게 개발 서버가 실행 중인 URL을 알려주세요. 브라우저 세션은 대화가 끝날 때까지 유지됩니다.

하나의 도구, 네 가지 작업: browser_inspect와 함께 action: "dom"(렌더링된 DOM), "styles"(전체 CSS 캐스케이드), "diff"(변경 전/후 확인), "screenshot"(시각적 스냅샷)을 사용합니다. 또는 필요한 것을 설명하기만 하면 Claude가 올바른 작업을 선택합니다.

처음 사용할 때 Puppeteer가 Chromium(~170MB)을 다운로드합니다.

시작하기 전 — 필요한 것

이 도구는 이미 설정되어 있어야 하는 두 가지, 즉 AI 코딩 도구와 현재 작업 중인 웹 프로젝트를 연결합니다. 각각이 무엇을 의미하고 어떻게 얻는지 설명합니다.

1. Node.js (이 도구를 실행하는 엔진)

Node.js는 컴퓨터에서 브라우저 외부의 JavaScript를 실행할 수 있게 해주는 프로그램입니다. 이 도구를 설치하고 실행하는 데 사용되는 명령어인 npm과 npx는 Node.js에 포함되어 있습니다.

이미 설치되어 있나요? 터미널(Mac) 또는 명령 프롬프트(Windows)를 열고 다음을 입력하세요:

node --version

v20.11.0과 같은 버전 번호가 보이면 준비된 것입니다. 오류가 발생하면 설치해야 합니다.

설치 방법: nodejs.org에서 다운로드하세요. LTS 버전(대부분의 사용자에게 권장되는 버전)을 선택하세요. 설치 프로그램을 실행하면 끝입니다.

2. AI 코딩 도구

AI에게 코드 작성이나 수정을 요청할 때 입력하는 도구입니다. 이 MCP 서버는 다음 도구 중 하나와 함께 작동합니다(하나만 있으면 됩니다):

아직 도구가 없고 어디서 시작해야 할지 모르겠다면 Cursor를 시도해 보세요. 디자인 배경을 가지고 있다면 가장 배우기 쉽습니다.

3. MCP란 무엇인가 (한 문장)

MCP(Model Context Protocol)는 브라우저, 데이터베이스, 파일 시스템과 같은 추가 기능을 AI 도구에 제공하는 표준 방식입니다. 이 도구는 그러한 기능 중 하나입니다. AI 도구의 설정 파일에 몇 줄의 설정을 추가하면 AI의 도구 상자에 자동으로 나타납니다.

4. 로컬에서 실행 중인 웹 프로젝트

이 도구는 라이브 브라우저에서 CSS를 검사합니다. 즉, 현재 개발 중인 React, Vue 또는 유사한 앱과 같은 웹 프로젝트가 컴퓨터에서 실행 중이어야 합니다.

프로젝트를 로컬에서 실행하면 http://localhost:5173 또는 http://localhost:3000과 같은 주소에서 열립니다. 이 도구에 제공할 URL이 바로 이것입니다.

로컬 프로젝트가 없으면 이 도구는 검사할 대상이 없습니다. 이 도구는 라이브 공개 웹사이트를 검사하는 용도가 아니라 활발한 개발 워크플로우를 위해 설계되었습니다.

설치 방법

사전에 설치할 것은 없습니다. AI 도구를 설정할 때(다음 단계), npx라는 도구를 사용하여 처음 필요할 때 browser-inspector-mcp를 자동으로 다운로드하고 실행합니다.

처음 실행될 때 Chromium(~170MB)이라는 브라우저도 다운로드합니다. 이는 도구가 페이지를 검사하는 데 사용하는 헤드리스 브라우저로, 백그라운드에서 보이지 않게 실행되며 일반 Chrome이나 Safari와는 아무런 관련이 없습니다.

AI 도구 설정 방법

컴퓨터의 파일에 작은 설정 조각(JSON 블록)을 추가해야 합니다. JSON은 구조화된 텍스트 형식일 뿐입니다. 블록은 다음과 같습니다:

{
  "mcpServers": {
    "browser-inspector": {
      "command": "npx",
      "args": ["-y", "browser-inspector-mcp"]
    }
  }
}

추가할 파일은 사용 중인 AI 도구에 따라 다릅니다. 아래에서 해당 도구를 찾으세요.

중요: 설정 파일에 이미 다른 내용이 있다면, 내용을 대체하는 것이 아니라 추가하는 것입니다. 아래 예시를 참조하세요.

Claude Code

파일 위치: ~/.claude.json

~는 홈 폴더를 의미합니다. Mac의 경우 /Users/사용자이름/입니다. 파일이 아직 없을 수도 있습니다. 없다면 만드세요.

터미널을 열고 다음을 실행하세요:

open -e ~/.claude.json

그러면 TextEdit에서 파일이 열립니다. 파일이 없었다면 새로 만들고 다음을 붙여넣으세요:

{
  "mcpServers": {
    "browser-inspector": {
      "command": "npx",
      "args": ["-y", "browser-inspector-mcp"]
    }
  }
}

파일에 이미 내용이 있다면 "mcpServers" 섹션을 찾아 그 안에 "browser-inspector" 블록을 추가하세요. 기존 내용을 삭제하지 마세요.

파일을 저장한 후 Claude Code를 종료하고 다시 여세요.

Cursor

파일 위치: ~/.cursor/mcp.json (모든 프로젝트에 적용) 또는 특정 프로젝트 폴