웹 개발을 하다보면 PC환경이 아닌 모바일 웹에서 그려지는 화면이나 스크립트 동작을 확인해야 할 때가 있다.
PC 브라우저 개발자도구에서 모바일 뷰포트로 변경해서 보는 것으로 어느 정도 커버가 되지만,
이건 보이는 화면만 모바일 사이즈로 보일 뿐 user-agent를 변경하더라도 여전히 PC환경인 것은 다르지 않다.
실제 안드로이드 기기를 PC랑 연결해서 디버깅하는 것은 케이블로 연결하고 ADB를 설치하면 할 수 있으니 익히 알려진 방법으로 할 수 있다.
근데 케이블이 연결되어있으면 안그래도 지저분한 데스크에서 걸리적거리는 게 너무 많다,,
케이블 없이 디버깅하는 방법을 알아보자.
전제조건
- ADB 설치 (https://developer.android.com/studio/releases/platform-tools)
- 휴대폰 개발자모드
- 옵션 USB 디버깅 활성화
- 무선 디버깅 활성화
- PC와 휴대폰은 동일한 와이파이에 있어야 함.
Windows OS 기반으로 작성한다.
연결하기
1. PC - 핸드폰 연결 후 adb devices로 확인
2. 무선 연결할 tcpip 포트 설정
adb tcpip 5555잘 쓰지 않는 5555와 같은 포트로 설정한다.
여기까지 했으면 이제 PC랑 핸드폰은 케이블을 분리해도 된다.
3. 핸드폰에 연결된 와이파이 ip 확인 후 PC랑 연결
adb connect <핸드폰ip>:<tcpip 포트>
adb connect 192.168.0.11:55554. chrome inspector 에서 브라우저 목록이 보이면 성공
기기 옆에 #핸드폰ip가 보이면 무선망으로 디버깅을 할 준비가 완료되었다.
💡 PC, 휴대폰이 재부팅되면 다시 연결해줘야함.
PC가 재부팅되면 3. 휴대폰 IP확인 및 연결 다시
휴대폰이 재부팅되면 2. TCPIP 포트설정부터 다시
예외 상황
1. adb unauthorized인 경우
우선 연결을 해제한 후, adb 연결 종료.
그 다음 .android (또는 Android) 아래에 adbkey.pub 파일 삭제
adb kill-server
cd %HOMEPATH%/.android
del adbkey.pub그러면 adb devices로 잘 붙게된다.
2. adb offline인 경우
adb kill-server
adb connect 182.adb 종료 후 다시 연결
FE Developer