Chrome 연동
Claude가 브라우저를 직접 조작해서 웹앱을 테스트하고 디버깅해요.
Chrome 연동이란?
Claude in Chrome 확장 프로그램을 설치하면, Claude Code가 Chrome 브라우저를 직접 제어할 수 있어요. 코드를 수정하고 → 브라우저에서 바로 확인하고 → 문제를 찾아 수정하는 것까지 한 번에!
라이브 디버깅
콘솔 에러를 읽고, DOM 상태를 확인하고, 코드를 바로 수정해요.
디자인 검증
Figma 목업대로 만들고, 브라우저에서 비교 확인해요.
웹앱 테스트
폼 검증, 시각적 회귀 테스트, 사용자 플로우 확인이 가능해요.
로그인 상태 공유
내가 로그인한 사이트에 Claude도 접근할 수 있어요.
필요 조건
- Google Chrome 또는 Microsoft Edge 브라우저
- Claude in Chrome 확장 프로그램 (Chrome 웹 스토어에서 설치)
- Claude Code v2.0.73 이상
- Anthropic 직접 플랜 (Pro, Max, Teams, Enterprise)
Brave, Arc 등 다른 Chromium 브라우저는 아직 지원되지 않아요. WSL도 미지원이에요.
사용법
1단계: Chrome 플래그로 Claude Code를 실행하세요.
claude --chrome2단계: Claude에게 브라우저 작업을 요청하세요.
code.claude.com/docs에 가서 검색창에 "hooks"를 입력하고 결과를 알려줘이미 세션 중이라면 /chrome 명령으로 연결할 수도 있어요.
활용 예시
코드 수정 → 브라우저 확인 자동화
Claude가 코드를 수정하면 자동으로 브라우저에서 결과를 확인하고, 문제가 있으면 다시 수정해요.
이 버튼의 색상을 파란색으로 바꾸고 브라우저에서 확인해줘인증된 웹앱 조작
내가 로그인한 상태를 공유하므로 Google Docs, Notion 등에 접근할 수 있어요.
내 Google Sheets에서 이번 달 매출 데이터를 가져와줘GIF 녹화
브라우저 작업을 GIF로 녹화해서 문서화하거나 공유할 수 있어요.