브라우저 콘솔·에러를 Claude가 실시간으로 보기 (Browser MCP)
웹 개발 중 에러가 나면 F12 열어 복붙할 필요 없이 Claude가 브라우저 콘솔을 직접 읽어요. 스크린샷도 자동으로 공유됩니다.
따라 하기
1단계
준비물 확인 — Chrome, VS Code, Claude 확장
- Browser MCP를 사용하려면 세 가지가 필요합니다.
- 1첫째, Chrome 브라우저: chrome.google.com에 접속해 없으면 설치합니다.
- 2둘째, VS Code: code.visualstudio.com에서 없으면 설치합니다.
- 3셋째, Claude Code 확장: VS Code 좌측 사이드바의 4개 사각형 겹친 아이콘(Extensions)을 클릭하고 검색창에 Claude를 입력한 뒤 Claude - Anthropic 확장을 설치합니다.
- 4설치 후 Claude 아이콘이 좌측 사이드바에 생기면 클릭해 claude.ai 계정으로 로그인합니다.
Claude 열기Extensions — Visual Studio Code
Claude
Claude Code
Anthropic
★★★★★4.9
여기를 클릭!
Claude Code by Anthropic
✓ 코드 편집기 안에서 대화
✓ 파일 직접 읽기·수정
✓ @-멘션으로 파일 참조
✓ MCP 서버 연동 가능
누를 위치 VS Code 좌측 사이드바›Extensions 아이콘›Claude 검색›Claude - Anthropic 설치›Claude 아이콘 클릭›로그인
팁 Claude Code VS Code 확장의 @browser 명령이 별도 MCP 서버 없이 가장 간편한 브라우저 연동 방식입니다.
처음이라 잘 모르겠다면
개발 서버를 켜두어야 이 기능을 쓸 수 있습니다. 프로젝트 폴더에서 터미널에 npm run dev를 입력해 서버를 먼저 실행하세요.
