Translate

[Android] Android 2.x, Android 3.x 의 Default Browser 에서 디버깅모드 사용하기




Honeycomb 의 OEM(Default) Browser 에서 화면이 정상적으로 나오지 않는경우..
디버깅 하기가 참으로 난감하다..

개발자도구를 지원하지 않는 IE6 같은 느낌이랄까..;;





디버깅 하다가 답이 없다는 생각에 혹시나 하는 마음에 찾아봤더니 툴이 있었다.

weinre(링크)

라는 프로그램인데 node.js 로 구성되어 있기 때문에 npm을 설치해야 한다.






이제부터는 설치 및 사용기!! (OSX 기준)


우선 npm이 설치되어있는지 확인!!
다음과 같이 되어있다면 아직 설치되지 않은 상황..






http://nodejs.org/download/ 사이트에서 운영체제에 맞는 프로그램을 받아서 설치!!






다음과 같이 나온다면 정상적으로 설치가 되었다.





이제 weinre 를 설치하자.







이제 서버(node)를 실행시켜 보자.
(boundHost 는 127.0.0.1이 아니라 외부에서 접속 가능한 아이피로 해야 한다.)








그리고 디버깅 할 소스에 요로코롬 스크립트를 추가한다.
PS.
- body를 닫기전에 추가
- 장비나 에뮬레이터에서 테스트를 한다면 127.0.0.1 이 아니라 외부에서 접속 가능한 ip를 넣어 주어야 한다.








브라우저에서 다음과 같이 서버에 접속한다.
(debug client user interface 를 클릭)








처음에는 다음과 같이 나오는데 다른 브라우저에서 해당 페이지를 띄우지 않은 상태이다.







다음과 같이 디바이스나 에뮬레이터에서 해당 페이지를 접속하면











아까의 페이지가 다음과 같이 변한다.
(Targets 의 링크를 클릭 후 Elements를 확인해보자)






웹 페이지 자체가 크롬개발자도구로 변한다.









위와같이 선택하면 해당 페이지에서 선택된 Element 가 표시되는 것을 볼 수 있다.
(사용 방법 및 단축키는 기존의 크롬개발자도구와 동일)





Weinre 한글문서:
http://hacks.mozilla.or.kr/2013/03/remote-debugging-firefox-os-with-weinre/


Android Default Browser 에서 Console Log 사용하기:
http://developer.android.com/guide/webapps/debugging.html





웹서버가 다른곳에 있어도 상관 업지만 자신의 개발 PC에 웹서버를 셋팅해 놓으면 개발시 테스트 시간이 단축된다는 장점이 있다.

Apache 나 Tomcat 셋팅방법은 귀찮으니.. 뿅!!


댓글