크롬으로 안드로이드 웹 디버깅을 하기 위해


안드로이드에 최신 크롬 (Chrome) M31 혹은 크롬 베타 (Beta) M32 앱을 설치한다.


현재 크롬 베타만 스크린캐스트 (Screencast)가 지원된다.


디바이스를 USB로 PC에 연결한다.


디바이스는 USB 디버깅이 허용된 상태이어야만 한다.


허용되어 있지 않다면, 다음 글을 참조한다.


http://devday.tistory.com/entry/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-Android-USB-%EB%94%94%EB%B2%84%EA%B9%85-Debugging-%ED%99%9C%EC%84%B1%ED%99%94%ED%95%98%EA%B8%B0


PC에서 최신 크롬 (M31)을 사용할 경우 다음을 Enable해줘야만 한다.


about:flags/#enable-devtools-experiments

about:flags/#remote-debugging-raw-usb


다음으로 들어가면 된다.


about:inspect


PC에서 Canary (M32+)를 사용할 경우에는 다음과 같이 바로 사용할 수 있다.


Tools -> Inspect Devices


이제 간단히 디버깅할 수 있다.


스크린캐스트만 되는게 아니라,


PC에서 키보드와 마우스를 사용할 수도 있기 때문에


디바이스를 손대지 않고도 디버깅할 수가 있다 (박수).


이 부분이 가장 매력적인 파트이다.


참고로 Canary에는 다양한 디바이스를 에뮬레이션 (Emulation)할 수 있는 기능이 추가되어 있다.


에뮬레이션의 결과는 매우 근접하지만 동일하지 않음에 유의한다.


또한, 포트 포워딩 (Port Forwarding)도 지원한다.


로컬 서버를 구동하고 모바일에서 보고 싶을 때


다음 버튼을 눌러 포트 포워딩 설정을 해주면 된다 (박수).


Port forwarding...


네트워크 연결 없이도 할 수 있어서 매우 매력적이다.


References:

http://blog.chromium.org/2013/12/chrome-devtools-for-mobile-emulate-and.html

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

http://www.youtube.com/watch?v=gZH1d2Co1X0

저작자 표시
신고

Posted by izeye


티스토리 툴바