Community코딩 & 개발github.com

timgunnar/skills-page-debug

page-debug 스킬은 브라우저 실시간 디버깅 기능을 구현합니다. 테스트 스크립트가 사전 단계를 스스로 실행하고 실패 직전에 정확히 멈춥니다. 그런 다음 AGENT와의 대화를 통해 CDP 프로토콜로 브라우저를 실시간 제어하여 Claude Code에서 DevTools처럼 페이지 상태를 확인하고, 선택자를 검증하며, 작업을 시도해 근본 원인을 찾을 수 있습니다.

skills-page-debug란 무엇인가요?

page-debug 스킬은 AI 에이전트(특히 Claude Code)가 브라우저를 실시간으로 디버깅할 수 있도록 지원하는 도구입니다. 이 스킬의 핵심 가치는 복잡한 테스트 시나리오에서 실패를 재현하는 대신, 스크립트가 실패 직전 상태에서 멈추고 AI가 직접 브라우저를 조작하며 문제를 진단할 수 있다는 점입니다. Chrome DevTools Protocol(CDP)을 통해 브라우저에 연결하여 페이지 DOM 검사, 선택자 유효성 검증, 요소 조작, 콘솔 로그 확인 등을 수행할 수 있으며, 모든 조작 결과를 AI가 실시간으로 분석합니다. 이는 엔드투엔드 테스트 디버깅, 복잡한 UI 결함 분석, 선택자 불일치 문제 해결 등에 특히 유용하며, 기존의 수동 디버깅 과정을 AI 주도 자동 분석으로 전환합니다. 이 스킬은 Claude Code 환경에 최적화되어 있으며, CDP 지원 브라우저(Chrome, Edge 등)와 함께 사용됩니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add timgunnar/skills-page-debug

Installed? Explore more 코딩 & 개발 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

skills-page-debug은(는) 무엇을 하나요?

page-debug 스킬은 브라우저 실시간 디버깅 기능을 구현합니다. 테스트 스크립트가 사전 단계를 스스로 실행하고 실패 직전에 정확히 멈춥니다. 그런 다음 AGENT와의 대화를 통해 CDP 프로토콜로 브라우저를 실시간 제어하여 Claude Code에서 DevTools처럼 페이지 상태를 확인하고, 선택자를 검증하며, 작업을 시도해 근본 원인을 찾을 수 있습니다.

관련 스킬