remote debugging on 안드로이드 (proxy 이용)

안드로이드 단말기를 이용하여 로컬 머신에 구동되어 있는 웹 애플리케이션을

테스트 하는 방법에 대해서 정리해 본다.

현재 작업하고 있는 개발망은 외부에서 접근이 불가능하고 회사 내에서 제공하고 있는 wifi망 또한 개발망에 접속이 불가능하여 테스트 단말기에서 로컬 머신에 접속할 수 있는 방법이 없다. 

이런 경우 크롬에서 제공하고 있는 remote debugging on android 를 이용하면 로컬 머신 접속을 통한 웹 테스트가 가능하다.

1.

안드로이드 휴대폰 USB 연결 (드라이버는 설치되어 있다고 가정)

안드로이드 SDK 설치 디렉토리 > platform-tools 디렉토리로 이동하여 다음 명령어 실행

안드로이드 휴대폰이 감지가 되지 않는다면 다음과 같이 해보자.

정상적으로 device정보가 노출되는 것을 확인할 수 있다.

2.

proxy 설정을 위해 fiddler를 설치한다.

fiddler 실행 후 Tools > Connections 탭 이동하여 아래와 같이 설정

proxy 설정을 해야지만 커스텀 도메인으로의 접속이 가능하다.

예를 들어 안드로이드폰의 크롬에 접속하여 http://localhost 로 접근 후 테스트를 하여도 문제가 없다면 proxy 설정이 필요없지만 http://front.test.com 과 같이 접근해야 될 필요성이 있을 때에는 proxy 설정을 해야지만 정상적인 테스트가 가능하다.

이와 같이 해야 하는 이유는 http://front.test.com와 같이 커스텀 도메인을 사용하기 위해서는 안드로이드 단말의 hosts 파일을 수정해야 하는데 그러기 위해서는 루팅이라는 작업을 진행해야 하기 때문이다. 루팅 작업이 다소 복잡할 수도 있기 때문에 proxy를 통한 테스트를 진행하는 편이 좋다.

3.

크롬 실행 > chrome://inspect/#devices 페이지 접속 > Port forwarding settings

피들러에서 listens on port로 지정한 포트를 입력하도록 한다.

4.

안드로이드 WIFI 설정에 들어간 후 프록시 설정을 한다.

5.

안드로이드 단말기에서 크롬을 실행한 후 http://front.test.com 에 접속해 보자.

로컬 머신의 크롬에 다음과 같은 화면이 출력이 되고 "inspect"를 클릭하면 디버깅이 가능하다.

참고 URL

https://developer.chrome.com/devtools/docs/remote-debugging#reverse-port-forwarding