배경
동네사람들끼리 쓰레기를 줍는 프로젝트를 개발하고 있다.
1차 개발 마감 후 테스트를 하기 위해 모바일 웹 환경에서 기능을 사용해보는데, PC 웹에서 테스트했을 땐 문제없던 곳에서 문제가 발생했다.
모바일에서는 PC 처럼 개발자도구[F12]로 테스트하기 어려웠고, 크롬에서 모바일 디바이스를 디버깅 할 수 있는 방법을 알아냈다.
바로 "안드로이드 개발자 모드"
들어만 봤지 직접 써보게 되다니 😊
크롬에서 모바일 디바이스 디버깅하는 방법
1. USB로 Android 기기를 PC에 연결
- 휴대폰과 컴퓨터를 USB 케이블로 연결
2. 휴대폰에서 개발자 옵션 활성화 -> USB 디버깅 허용
1. 개발자 모드 활성화
- 설정 > 휴대전화 정보 > 소프트웨어 정보 > 빌드 번호를 7번 연속 터치
- 결과 : "개발자 모드 활성화"로 전환됐 토스트 메시지 확인
2. USB 디버깅 활성화
- 설정 > 맨 하단의 개발자 옵션 > USB 디버깅 켜기
- 컴퓨터에서 요청하면 "USB 디버깅 허용" -> 확인
3. PC에서 Chrome DevTools 접속
1. PC 크롬 주소창에 입력
chrome://inspect/#devices
2. 연결된 디바이스가 보이면? (약 5초내)
- Remote Target에 크롬 브라우저 탭 목록이 보인다.
- 디버깅할 탭의 "inspect" 버튼을 클릭
✨ 결과화면
덕분에 모바일 웹 환경에서도 네트워크 탭 등을 사용하여 디버깅할 수 있었다.
안드로이드 개발자 모드는 주로 개발자들을 위해 제공된 숨겨진기능이라고 한다.
개발자 옵션에는
1. 디버깅 기능을 활성화하여 앱 오류 발견
2. 기기에서 버그 보고서 캡처
등등 엄청 많은 기능들이 숨어있었다!