오류 제보, 내용 개선에 대한 건의는 얼마든지 환영합니다. :)
Android 기기 브라우저 대응은 만만하지 않다
Android 기기 대응을 위해 개발을 하다 보면,
분명 PC 크롬 브라우저 개발자 도구의 모바일 해상도에선 아무 이상이 없었는데
실제 기기 브라우저에서는 다르게 작동하지 않는 경우가 꽤나 생깁니다.
매번 프로젝트를 배포한 후 기기를 일일이 테스트하는 것은 너무나도 비효율적이기 때문에,
PC에서 바로 Android 기기의 브라우저를 디버깅할 수 있는 방법을 필요로 하게 됩니다.
USB 연결 유선 디버깅
PC와 Android 기기를 USB로 직접 연결해서 하는 디버깅이 가장 일반적이며,
무선 디버깅의 사전 단계가 됩니다.
1. Android 기기 개발자 모드, USB 디버깅 활성화
디버깅하고자 하는 Android 기기가 개발자 모드여야 합니다.
개발자 모드를 활성화하는 방법은 다음과 같습니다.
- 설정 > 휴대전화 정보 > 소프트웨어 정보
빌드번호7번 터치
개발자 모드가 켜지면 USB 디버깅을 활성화할 수 있습니다.
USB 디버깅을 활성화하는 방법은 다음과 같습니다.
- 설정 > 개발자 옵션 > USB 디버깅
USB 디버깅활성화
2. ADB 설치, 환경변수 설정
PC 브라우저가 Android 기기를 인식하기 위해선
Android SDK에 포함된 ADB(Android Debug Bridge)가 필수적입니다.
ADB를 Windows에 설치하는 방법은 다음과 같습니다. Mac 설치방법은 추후 추가 예정
- 링크 다운로드 후 압축 풀기 (Android 스튜디오가 설치되어 있을 경우 생략)
- 제어판 > 시스템 및 보안 > 시스템 > 고급 시스템 설정
- 고급 탭 > 환경 변수
- 시스템 변수의 Path 변수에 ADB 경로 추가
- ADB 경로
- 다운로드받은 경우 압축을 푼 폴더 경로
- Android 스튜디오가 설치되어 있을 경우 설치 폴더 내 platform-tools 디렉토리
- 보통
C:\Users\사용자이름\AppData\Local\Android\Sdk\platform-tools
- 환경변수 변경사항을 적용하기 위해 재부팅
cmd 창에서 adb 명령어를 입력했을 때,
다음의 메시지가 출력된다면 정상적으로 설치가 완료된 것입니다.
Android Debug Bridge version 0.0.00
Version 00.0.0-0000000
...3. PC와 Android 기기 USB 연결
디버깅을 진행할 PC와 대상 Android 기기를 USB로 연결합니다.
USB 케이블은 충전용 케이블이 아닌 데이터 전송이 가능한 케이블이어야 합니다.
USB 디버깅을 허용하겠습니까?를 묻는 확인 창이 뜨면 허용을 선택합니다.
cmd 창에서 adb devices 명령어를 입력했을 때,
기기의 상태가 unauthorized가 아닌 device로 출력되면 정상적으로 연결된 것입니다.
4. 크롬 브라우저를 활용한 Android 기기 디버깅
PC 크롬 브라우저의 Inspect with Chrome Developer Tools를 통해
Android 기기를 디버깅하는 마지막 단계입니다.
- 대상 Android 기기에서 디버깅하고 싶은 브라우저를 켜고 웹페이지 접속
- PC 크롬 브라우저 주소창에
chrome://inspect를 입력- Devices 목록에 나타난 기기와 브라우저 확인
- 디버깅 대상 기기 브라우저 항목 밑의
inspect클릭- 기기 브라우저 화면을 그대로 보여주는 PC 크롬 개발자 도구로 디버깅
- PC 크롬 개발자 도구 창 화면
원격 무선 디버깅
USB 케이블을 이용한 유선 디버깅을 하다보면 유선의 불편함에 자꾸 부딪히게 됩니다.
USB 케이블의 길이를 신경써야 한다든지, USB 포트의 낮은 출력량으로 인한 배터리 소모라든지...
다행히도 대상 Android 기기와 PC가 같은 네트워크에 연결되어 있다면 USB 케이블을 연결하지 않고 무선으로 디버깅을 할 수가 있습니다.
1. PC와 Android 기기 USB 연결
USB 연결 유선 디버깅의 3. PC와 Android 기기 USB 연결과 동일합니다.
2. Android 기기-PC 간 통신 포트 설정
cmd 창에서 adb tcpip [포트 번호] 명령어를 입력해 Android 기기와 PC의 통신에 사용할 포트를 설정합니다.
포트 번호는 사용자 마음대로 설정할 수 있지만, 이미 사용 중인 다른 포트와 겹치면 안 됩니다.
5000~8999 사이의 포트 번호를 입력하면 왠만해선 충돌하지 않습니다.
명령어를 입력했을 때 다음의 메시지가 출력된다면 정상적으로 설정된 것입니다.
restarting in TCP mode port: [포트 번호]3. Android 기기 원격 무선 연결
cmd 창에서 adb connect [기기 Wi-Fi IP 주소]:[포트 번호]
명령어를 입력해 Android 기기를 무선으로 연결합니다.
USB 디버깅을 허용하겠습니까?를 묻는 확인 창이 뜨면 허용을 선택합니다.
Android 기기의 Wi-Fi IP를 확인하는 방법
1. 설정 > 연결 > Wi-Fi > 연결된 네트워크 설정
2.IP 주소확인
cmd 창에서 adb devices 명령어를 입력했을 때,
기기의 상태가 unauthorized가 아닌 device로 출력되면 정상적으로 연결된 것입니다.
이제는 USB를 제거해도 디버깅이 가능합니다.
※ 원격 연결 해제
cmd 창에서 adb disconnect 명령어를 입력하면
모든 원격 기기에 대한 연결이 해제됩니다.
참고자료
