Skip to content

Inspector to Debug Mobile Browser

2013/08/16

모바일 웹페이지를 개발하거나 테스트를 하기위해서 꼭 필요한 툴에 대해 정리해볼까 합니다.

Safari 6.0 이상버전

=> 상세 설명 또는 그림 참고 (http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-using-web-inspector-to-debug-mobile-safari/)

Safari 나 Chrome 이나 webkit engine 에서 구동되기 때문에 거의 비슷하다

Mobile Device에서 렌더링된 페이지도 거의 동일하다. => windows 크롬에서 해도 큰 차이는 없다는 이야기임.

하지만, 분명 모바일과 데스크 탑은 틀린 부분있다.

Apple은 iOS 6와 Safari 6를 발표하면서 debugging tool을 발표했다.

하지만, Mac 상에서 remote web inspector 만 디버깅이 가능하며 Windows에서는 사용 불가하다.

사용 방법

  1. 최신버젼 확인

    1. Safari 6
    2. Mac OSX Lion (10.7.4) or higher
    3. Xcode 4.5 with iOS 6 SDK or higher
  2. Developer Tools 실행

    1. Virtual Device
      1. Settings > Safari > Advenced > turn on “Web Inspector”
    2. Desktop Safari
      1. Safari > Preferences > Advanced > check “Show develop menu in menu bar”
  3. Inspect Your Website

    1. Desktop Safari
      1. Develop > iPhone Simulator > 페이지 선택
  4. 할 수 있는 것들

    1. Make live changes to HTML and CSS.
    2. See how your website/application is performing including seeing details for JavaScript events and network requests.
    3. Debug JavaScript using breakpoints and other tools.
    4. View warnings and errors.
    5. Access the console.
    6. Search the DOM.
    7. Access and view site storage.

Weinre

http://people.apache.org/~pmuellr/weinre/docs/latest/

http://elegantcoder.com/weinre <- 한글 사이트

 

요약 :

내장 디버깅 툴이 없는 모바일 브라우저를 위한 원격 디버깅 툴.

Webkit 계열의 개발자 도구인 Web Inspector 를 사용할 수 있도록 해준다.

세가지 파트로 나뉜다.

  • 서버 : java기반 (Jetty)의 http 서버 기존에는 java 였으나 node.js 로 바뀐듯??
  • 대상 : 디버깅할 모바일 디바이스 브라우저
  • 클라이언트 : Safari, Chrome 등에 내장된 Web Inspector와 비슷한 외관의 클라이언트 페이지

 

사용방법

  1. 설치(http://people.apache.org/~pmuellr/weinre/docs/latest/Installing.html)
    1. npm 설치
      1. 최신 node.js 설치하면됨.(http://nodejs.org/download/)
    2. weinre 설치
      > npm -g install weinre
  2. 서버 실행(http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html)
    ipconfig  로 자신의 ip 확인후

    > weinre --httpPort 8081 --boundHoost 192.168.xxx.xxx(자신의 ip)

    ※ boundHost 의 기본 값은 localhost이나 다른 기기(Android Simulator 등)에서 접속할 수 없다

    ※ 다른 상세 옵션은 : http://elegantcoder.com/weinre

  3. 클라이언트 실행
    1. 데스크탑에서 http://192.168.xxx.xxx:8081/client/ 접속
    2. 시뮬레이터에서 http://192.168.xxx.xxx:8081/demo/weinre-demo.html 접속

 

weinre_run

 

No comments yet

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: