모바일 디버깅 방법론

무엇을 해주나

모바일 브라우저에서 발생하는 JavaScript 오류를 확인할 방법을 상황별로 제시합니다.

• 네이티브 원격 검사: Android Chrome(chrome://inspect), iOS Safari 웹 인스펙터, Firefox 원격 디버깅, Android 11+ 무선 adb pair/connect 절차
• 인페이지 콘솔: Eruda / vConsole을 조건부 로딩하는 방법, 두 도구의 기능 비교표
• 보안 가드레일: 공개 CDN 대신 락파일로 고정한 패키지를 same-origin /debug 디렉터리에 복사하고 SHA256 체크섬으로 검증
• 자동화: Playwright·Puppeteer로 모바일 에뮬레이션 + console/pageerror/requestfailed 로그 수집
• 운영 모니터링: Sentry(v8 함수형 integration), LogRocket 세션 리플레이
• 기타: scrcpy 화면 미러링, Mac 없이 iOS 디버깅(ios-webkit-debug-proxy, Inspect.dev), LambdaTest/BrowserStack 클라우드 기기

이런 분께 추천

• 반응형 웹·모바일 웹앱을 만드는 프론트엔드 개발자
• "내 폰에서만 깨진다"는 QA 리포트를 재현해야 하는 분
• Mac이 없어 iOS 디버깅이 막힌 Windows/Linux 사용자
• 실제 기기 콘솔 로그를 CI에서 수집하고 싶은 분

활용 예시

1. "안드로이드 실기기에서 로컬 개발 서버(localhost:3000)를 열어 콘솔을 보고 싶다" → chrome://inspect 포트 포워딩 설정 안내
2. "USB 연결이 불가능한 고객사 태블릿에서 오류를 봐야 한다" → ?eruda=true 조건부 로딩 스니펫과 same-origin 파일 배치 절차 제시
3. "iPhone 15 뷰포트에서 나는 콘솔 에러를 스크립트로 수집해줘" → Playwright 디바이스 에뮬레이션 + 로그 JSON 출력 코드

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/jamditis/claude-skills-journalism/HEAD/dev-toolkit/skills/mobile-debugging/SKILL.md

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

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 jamditis/claude-skills-journalism 의 dev-toolkit/skills/mobile-debugging 폴더를 내 ~/.claude/skills/mobile-debugging/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.