Claude Code 상세 사용법 21: Chrome으로 웹 QA와 콘솔 디버깅하기 | DAKER 커뮤니티

Claude Code 상세 사용법 21: Chrome으로 웹 QA와 콘솔 디버깅하기

Claude Code 공식 Chrome 문서는 브라우저 확장을 통해 CLI나 VS Code에서 실제 Chrome/Edge 탭을 열고, 로그인 상태가 있는 웹앱을 테스트하고, 콘솔과 DOM을 읽는 흐름을 설명한다. 클로드 코드로 프론트엔드를 고칠 때 핵심은 “코드 작성” 다음에 “브라우저 관찰”을 같은 세션 안에 붙이는 것이다.

1. Chrome 연결은 필요할 때만 켠다

공식 문서 기준 Chrome 통합은 beta이며 Google Chrome과 Microsoft Edge를 지원한다. Chrome 확장 1.0.36 이상, Claude Code 2.0.73 이상, 직접 Anthropic 플랜이 필요하다. 매 세션에 브라우저 도구를 싣고 싶지 않다면 기본 활성화보다 명령별 사용이 낫다.

claude --version
claude --chrome

이미 세션 안에 있다면 슬래시 명령으로 켠다.

/chrome

/chrome에서는 연결 상태 확인, 재연결, 사용할 브라우저 선택, 기본 활성화 설정을 할 수 있다. 기본 활성화는 편하지만 컨텍스

4. 실패 모드

확장이 감지되지 않으면 Chrome이 실행 중인지, 확장이 켜져 있는지, /chrome의 Reconnect를 먼저 본다. 첫 연결 직후에는 native messaging host 설정을 Chrome이 다시 읽어야 해서 브라우저 재시작이 필요할 수 있다. 장시간 대기 뒤 브라우저 도구가 멈추면 확장 service worker가 idle 상태가 된 경우가 있으니 /chrome에서 재연결한다. 로그인 페이지나 CAPTCHA는 Claude가 직접 넘기지 않고 사용자의 수동 처리를 기다린다.

Senior takeaway: Chrome 통합은 테스트 자동화를 대체하는 장치가 아니라 재현과 관찰의 속도를 높이는 장치다. Claude Code에게 URL, 입력값, 콘솔 필터, 수정 범위, 재검증 명령을 같이 주면 바이브코딩이 감각적 수정이 아니라 반복 가능한 LLM 개발 워크플로우가 된다.트 사용량이 늘 수 있으니 프론트엔드 QA가 많은 저장소에만 적용한다.

2. 프롬프트는 관찰 기준을 좁힌다

나쁜 요청은 “사이트 봐줘”다. 좋은 요청은 페이지, 입력값, 기대 결과, 로그 범위를 준다.

localhost:3000/login을 열고 이메일 없이 제출해줘.
콘솔에서는 error와 warning만 확인하고,
폼 에러 문구가 화면에 표시되는지 보고해줘.
실패하면 관련 컴포넌트만 수정하고 같은 플로우를 다시 확인해줘.

콘솔 전체를 덤프하라고 하면 노이즈가 많다. “로드 시 에러”, “버튼 클릭 직후 warning”, “특정 API 실패”처럼 패턴을 정하면 AI 코딩 루프가 빨라진다.

3. Chrome과 computer use를 구분한다

웹앱은 Chrome 통합이 우선이다. macOS 네이티브 앱, iOS Simulator, API 없는 GUI 도구처럼 브라우저가 아닌 대상은 공식 computer use 문서의 computer-use MCP가 후보가 된다. 단 computer use는 더 넓은 화면 제어 권한을 쓰므로 세션별 앱 승인과 Esc 중단 경로를 명확히 둔다.