안드로이드 기기에서 로컬컴퓨터 hosts 에 정의된 도메인에 접근하고(로컬망 접속하기) 안드로이드 모바일 웹 디버깅까지!!

 

PC와 안드로이드 기기가 같은 무선망에 연결되어야한다.

0. 크롬 브라우저가 필요함.

1. PC에 안드로이드 adb 설치가 되어있어야한다. 

adb 설치는 구글에 찾아보면 나온다.

2. 안드로이드기기의 개발자 모드가 활성화 되어있어야한다.

3. pc와 안드로이드 기기를 usb 를 통해 연결한다.

usb 디버깅을 허용해야한다.

PC에 연결시 안드로이드 기기에 뜨는 얼럿창을 통해 컴퓨터 RSA키 지문 확인 과정을 거친 뒤 PC의 cmd 창에 adb devices 명령어를 통해 연결된 기기가 있음을 확인한다.

컴퓨터 RSA 키 지문 확인

adb devices 명령어

크롬 개발자 도구 (단축키 F12) 를 켜고 Main Menu (오른쪽 점 3개)를 클릭하고 More tools > Remote devices를 선택

Main Menu 를 통해  Remote Devices  탭 열기.

Discover USB devices 확인란이 활성화되었는지 확인

Discover USB Devices  확인란이 활성화되었습니다.

좌측 창에 안드로이드 기기명과 함께 Connected 가 보이면 연결에 정상적으로 성공한것이다.

 

4. proxy 설정이 필요하다. 

안드로이드 기기가 pc의 네트워크망을 통해 접속해야 한다.

proxy 설정에는 여러 유틸 프로그램이 있겠지만 여기서는 fiddler를 사용한다.

https://www.telerik.com/fiddler

Fiddler - Free Web Debugging Proxy - Telerik

 

fiddler proxy 설정

Tools > Options > Connections 탭

port 는 pc가 사용하지 않는 포트로 설정해야한다 (ex: 8888, 5555 등)

(중요)!! 여기서 허용할 포트는 인바운드 허용이되어있거나 이 테스트를 진행할때에는 PC의 방화벽을 해제해야한다.

Allow remote computers to connect 에 체크한다.

안드로이드 기기에서 연결된 와이파이 네트워크를 길게 눌러 설정에 들어가 pc의 무선네트워크 ip와 방금 proxy 설정한 포트를 기입해준다.

안드로이드기기에 proxy 설정

설정 후 안드로이드에서 인터넷 접속 시 pc의 fiddler 상에 접속 패킷 로그가 주르륵 뜨게된다.

안드로이드 통신 패킷 수집

 

5. 안드로이드 기기에서 pc의 hosts 파일에 정의한 사용자설정 로컬 도메인에 접속한다.

웹브라우저 앱 (ex. 삼성브라우저, 크롬)을 켜고 로컬 도메인에 접속한다.

정상적으로 접속 될것이며 구글 개발자 도구에서 안드로이드 기기 모델명을 클릭 > Inspect 클릭 하면 아래와 같이 새로운 창이 뜨게된다. 

개발자 도구에서 안드로이드 기기 inspect

모바일 레이아웃의 경우 확인이 어려운 경우가 종종 발생하는데 이런 디버깅 툴을 이용하면 웹 디버깅을 손쉽게 할 수 있다.

 

정말 좋은세상이다 ㅋㅋㅋㅋㅋ

 

참고사이트

1. Google Tools for Web Developers - 로컬 서버 액세스
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server

로컬 서버 액세스  |  Tools for Web Developers  |  Google Developers

2. Google Tools for Web Developers - Android 기기 원격 디버깅 시작하기
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Android 기기 원격 디버깅 시작하기  |  Tools for Web Developers  |  Google Developers