원격 웹 디버거 weinre

모바일 웹 개발을 해보면 다른건 다 피씨 웹 개발과 같지만 디버깅은 그렇지 않다. 종국에는 디바이스에서 직접 띄워봐야 하는데 스크립트 오류, CSS깨짐 등을 매번 확인하고 고치기가 무척 번거롭다. 마치 IE7이하에서 페이지 개발을 하는 기분. 모바일 개발에도 Firebug나 Chrome, Safari의 개발 인스펙터같은게 있으면 좋겠다 생각했는데, 있내? ㅎ

Weinre 란 툴인데 사이트 첫인상은.... Fiddler2와 비슷했다. 뭐야 이게? ㅡ ㅡ^ 디자이너를 제공해주고 싶은 기분.

Weiner는 Remote Web Debuger이다. 이 말은 A장비의 브라우저에 뜬 페이지를 B장비의 인스펙터에서 컨트롤 할 수 있다는 말이다. Web Inspector Project as Webkit의 부산물이며 무척 간단하다. 자바로 되어있으며 jetty로 실행된다.

설치

Github에서 파일을 다운 받는다. 맥용은 Browser Built-in이 아닌 전용 UI가 따로 있으나.. jar파일을 mac app으로 패키징 했을 뿐이다. 별거 없고, 그냥 jar버전을 받아도 상관 없을듯. 내 경우는 mac용을 받았으나 UI 버전 말고 페키지 안에 있는 jar를 바로 실행시켰다. 적당한 폴더에 풀면 된다. 설치는 없다.

기동

command line기준으로 설명하면 다음 처럼 실행하면 기동된다.

java -jar weinre.jar

아래 같은 콘솔이 뜨면 정상적으로 기동 된 것이다.

    2011-08-24 19:16:49.298:INFO::jetty-7.x.y-SNAPSHOT
    2011-08-24 19:16:49.371:INFO::Started SelectChannelConnector@localhost:8080
    2011-08-24 19:16:49.371:INFO:weinre:HTTP server started at http://localhost:8080

만약 아래 처럼 뜨면 포트 충돌이다. 옵션을 주어서 포트를 바꾸자. 기본포트는 8080.

    2011-08-24 19:16:41.770:WARN::FAILED SelectChannelConnector@localhost:8080:     java.net.BindException: Address already in use
    2011-08-24 19:16:41.770:WARN::FAILED org.eclipse.jetty.server.Server@5f70bea5:  java.net.BindException: Address already in use
    2011-08-24 19:16:41.771:WARN:weinre:exception launching server: java.net.BindException:     Address already in use
    2011-08-24 19:16:41.771:WARN:weinre:exiting...


java -jar weinre.jar --httpPort 8081

데모 and 사용법

8080에 띄웠다는 가정하에 브라우저를 띄워서 http://localhost:8080 를 띄운다. 다음 같은 페이지가 뜬다. 기본 페이지에 모든 정보가 있다. 사용할 Inspector의 주소는 http://localhost:8080/client/#anonymous 이다.

데모 페이지를 띄운다. http://localhost:8080/demo/weinre-demo-min.html#anonymous

그러면 이제 Chrome과 Safari에 있는 것과 동일한 Inspector를 사용할 수 있다. Element텝에서 요소 선택을 하면 데모페이지의 해당 요소가 활성화되고 변경하면 바로 반영되고, Console에 alert('Hello')를 띄우면 데모페이지에 뜬다. 아직 감이 없는 분을 위해 참부하면 아이패드 에뮬레이터에서 접근한 데모페이지를 Inspector로 컨트롤 할 수 있다.

실 페이지 세팅

데모 페이지 말고 실제 페이지는 어떻게 해야 할까? 해당 페이지에 타겟지정 태그를 붙이면 된다.

고급(?)활용

디버그 서버운영이 가능하다. 예를 들면 debug.zziuni.pe.kr도메인에 weinre를 띄워두고, debug.zziuni.pe.kr/client/#anonymous 를 접근해서 인스펙터를 띄우고, 다음 타겟코드를 넣은 페이지를 아이패드등에서 실행하면 된다. 그러면 테스트하려는 페이지나 웹 앱이 어디에 위치해있던 뜬다. (라고 되어있다. 아직 안해봄. )

결론

사이트에 멀티유저 관련내용도 있는 것으로 봐서 디버그 서버를 첨부터 고려한거 같다. 일단 첫 느낌이 좋다. 작동도 아주 좋고, 도메인 세팅과 IE에서 뜨나? 등은 안해봤지만 웹 앱 개발에서 아~~ 주 도움이 될듯.