[Android] Remote debugging on Android

[출처 : Remote Debugging on Android]

개요

모바일 웹 개발시 같은 사이즈의 화면임에도 불구하고 PC에서의 화면과 모바일에서의 화면이 차이가 발생하는 경우가 있다. PC화면에서는 크롬의 DevTools을 적극 활용하여 HTML이나 CSS, Script 등으로 변경하여 원하는 화면을 유도할 수 있지만 모바일에서는 쉽지 않았다. 하지만 다음의 방법들을 이용하여 모바일 화면도 디버깅할 수 있게 되었다. 

Google Developers 에서는 크롬 버전에 따라 다음과 같은 두가지 방식으로 모바일에서의 디버깅을 지원하고 있다. 

1. Remote debugging with Chrome and ADBPlugin

Android SDK 없이도 안드로이드 장치를 연결하여 디버깅할 수 있다. 크롬 베타, 개발 또는 카나리아 버전에서 사용할 수 있는 방법이다. (크롬 버전 28.0.1500.72 m 에서 확인한 결과 상관없다.) 크롬의 확장프로그램인 ADBPlugin 을 이용하는 방법으로 장치를 연결하고 모바일 장치에 나타난 화면에 대한 디버깅을 개발PC에서 변경하는 방법으로 디버깅을 진행할 수 있다. 이때 모바일 크롬, 개발자 PC의 크롬, 장치 드라이버, USB 케이블 등이 필요하다. 

링크 : https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote-debugging-beta

2. Remote debugging with Chrome Stable

Chrome Stable 에서 사용할 수 있는 디버깅 방법이다. 1의 방법에 추가로 안드로이드 SDK 등이 더 필요하다. 안드로이드 SDK에 포함된 adb 명령어를 통해 포트포워딩하고 크롬에서 localhost:9222 를 입력하여 디버깅할 수 있는 방법이다. 

adb forward tcp:9222 localabstract:chrome_devtools_remote

 

링크 : https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote-debugging-stable 

결론

크롬 버전에 따라 두가지 방법을 제시하지만 테스트해 본 크롬 (버전 28.0.1500.72 m)에서는 두가지 모두 적용할 수 있었다. 구지 안드로이드 SDK 까지 설치해가며 2번의 방법을 적용하는 것보다 간단하게 크롬 확장 프로그램을 설치하여 디버깅을 할 수 있는 1번 방법에 한표를 더 던진다. 

참고

http://troy.labs.daum.net/

http://ami.responsivedesign.is

https://developers.google.com/chrome-developer-tools/docs/remote-debugging