모바일 화면 개발자 도구 보기

안드로이드 기기에서 모바일 웹페이지를 디버깅하는 대표적인 방법들

---

1. PC의 Chrome DevTools로 원격 디버깅하기

1. 모바일에서 개발자 옵션·USB 디버깅 활성화
   • 설정 → 휴대전화 정보 → 소프트웨어 정보 → “빌드 번호”를 7회 터치 → 뒤로 가기 → “개발자 옵션” → “USB 디버깅” 켜기
2. USB 케이블로 PC에 연결
   • Android 기기를 USB로 PC에 연결하면, 휴대폰 화면에 “USB 디버깅 허용” 대화 상자가 뜹니다. 허용하세요.
3. PC의 Chrome에서 디바이스 선택
   • PC Chrome 주소창에 chrome://inspect/#devices 입력
   • “Discover USB devices”가 켜져 있는지 확인
   • 연결된 기기의 브라우저 탭 목록이 보이면, “inspect” 버튼을 눌러 DevTools를 엽니다
4. 모바일과 동일한 UI로 미리보기
   • DevTools 상단의 Toggle device toolbar(📱 아이콘)를 클릭하면, 다양한 기기 크기로 시뮬레이션 가능합니다.

---

2. 에뮬레이터 혹은 가상 디바이스 이용

• Android Studio AVD(에뮬레이터)
  1. Android Studio에서 AVD Manager 실행 → 에뮬레이터 기기 생성·실행
  2. 에뮬레이터 내 Chrome 열기 → PC Chrome의 chrome://inspect에서 위와 동일하게 Inspect
• 브라우저 내 Device Toolbar 만 사용
  • PC Chrome DevTools( F12 ) → Toggle device toolbar(📱) → 화면 크기·해상도·터치 이벤트 시뮬레이션

---

3. 직접 모바일 브라우저에서 개발자 도구 띄우기 (Eruda)

서버 사이드 접근 없이 모바일 브라우저 자체에서 디버깅 UI를 띄우고 싶다면, 페이지에 Eruda 스니펫을 삽입하세요.

eruda.init();

• Eruda 아이콘이 화면에 뜨고, 탭별로 Console·Elements·Network 등을 볼 수 있습니다.
• 프로덕션 배포 시에는 반드시 스니펫 제거하세요.

---

요약

• 실제 기기 + USB 디버깅 → PC Chrome DevTools(chrome://inspect)
• 에뮬레이터 → AVD 또는 DevTools Device Toolbar
• 모바일 내장 도구 → Eruda 같은 JS 라이브러리 활용

이 중 하나만 선택해 사용하시면, 안드로이드 모바일 화면에서 편하게 개발자 도구를 사용할 수 있습니다.