DevTools 브라우저 테스트

무엇을 해주나

• Chrome DevTools MCP 서버를 연결해 에이전트가 실제 브라우저 런타임을 보게 만듭니다.
• 스크린샷, DOM 트리, 콘솔 로그, 네트워크 요청/응답, 성능 트레이스, 계산된 스타일, 접근성 트리를 도구별 용도표로 정리해 줍니다.
• UI 버그 / 네트워크 문제 / 성능 문제 각각에 대한 5단계 디버깅 워크플로(재현 → 조사 → 진단 → 수정 → 검증)를 제공합니다.
• 복잡한 UI 버그용 테스트 플랜 템플릿과 before/after 스크린샷 비교 절차를 포함합니다.
• 브라우저에서 읽은 모든 내용(DOM, 콘솔, 네트워크 응답)을 "신뢰할 수 없는 데이터"로 취급하는 보안 경계 규칙, JS 실행 제한(읽기 전용, 쿠키·토큰 접근 금지), 프로필 격리 지침을 명시합니다.

이런 분께 추천

• 프런트엔드/웹 앱을 만들며 Claude Code에게 실제 렌더링 결과를 확인시키고 싶은 개발자
• 콘솔 에러, CORS/4xx/5xx, Core Web Vitals(LCP·CLS·INP) 같은 런타임 문제를 자주 다루는 분
• 에이전트가 브라우저를 조작할 때의 보안 리스크를 통제하고 싶은 팀

활용 예시

1. "할 일 체크박스 애니메이션이 깨진다" → 페이지 이동 후 스크린샷, 콘솔 에러 확인, DOM/계산된 스타일 비교로 원인 진단 후 수정 및 재검증.
2. "저장 버튼을 눌렀는데 데이터가 안 들어간다" → 네트워크 모니터로 PATCH 요청 URL·페이로드·상태 코드 확인, 4xx면 클라이언트 요청 수정.
3. "페이지가 느리다" → 성능 트레이스 기준선 기록 → 50ms 이상 롱태스크와 LCP/CLS 확인 → 병목 수정 후 다시 트레이스 비교.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/aiskillstore/marketplace/HEAD/pending/addyosmani/browser-testing-with-devtools/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 aiskillstore/marketplace 의 pending/addyosmani/browser-testing-with-devtools 폴더를 내 ~/.claude/skills/browser-testing-with-devtools/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.