iOS Simulator의 Mobile Safari를 원격 디버깅하는 방법
모바일 웹페이지를 개발하다 보면 Firefox의 Firebug나 Chrome/Safari의 Inspector 같은 도구가 절실한 순간이 있다. 아래 두 가지 방법으로 아쉬움을 해결할 수 있다. iOS 6의 훨씬 간편한 Web Inspector에 대한 내용도 추가로 소개한다.
iOS6's Web Inspector
iOS6는 훨씬 더 편한 방법을 제공한다. 아래처럼 뭘 설치하고 그럴 필요도 없다. iOS Simulator에서도 되고, 케이블로 직접 맥과 연결한 iOS device와도 바로 작동된다. Settings > Safari > Advanced > Web Inspector를 On하고 모바일 사파리로 웹페이지를 하나 띄우자. 이제 Mac에서 Develop 메뉴를 활성화해둔 사파리(버전 6 이상)를 열어보면 Develop 메뉴 아래에 연결된 iOS device 목록이 나온다. 거기서 원하는 페이지를 선택하면 Inspector가 실행된다. 초간단. 맥에서만 된다. Windows는 아직.
WebKit Remote Inspector
준비물:
- iOS Simulator/Mobile Safari (iOS SDK 5.0 or above)
- Safari web-browser on iOS 5
- 셸 스크립트
가장 간단한 방법. 이 방법은 iOS 6에서는 작동하지 않는다. 우선 위에 링크된 셸 스크립트를 설치하고 실행하면 끝. 이 스크립트가 자동으로 iOS Simulator를 실행하고, 원격 디버거가 작동되도록 설정하고, 사파리를 실행해 http://localhost:9999 를 띄워줄 것이다. 화면에 표시된 웹페이지가 목록을 클릭하면 익숙한 Inspector 화면으로 모바일 웹페이지를 살펴볼 수 있다.
Safari 대신 Google Chrome을 사용할 수도 있는 것 같은데 내 경우는 웹페이지 목록만 나오고 인스펙터가 제대로 작동하지 않았다.
Weinre
준비물:
- iOS Simulator/Mobile Safari
- Weinre : WEbInspectorREmote
위의 WebKit remote inspector가 제대로 작동한다면 굳이 Weinre를 써야하는 경우는 많지 않을게다. 하지만 Weinre는 더 낮은 버전의 iOS와 Android 등 다른 플랫폼을 지원하므로 여전히 매우 유용하다.
이 방법은 준비할 일이 더 많다. 우선 Weinre를 다운로드하고 실행한다. 그리고 디버그할 웹페이지에 자바스크립트 한 줄을 넣어줘야 한다. Weinre를 실행하면 Server Home Page 탭에 설명되어 있다.
[cce_html][/cce_html]
웹페이지를 로딩한 뒤 Weinre 화면의 Debugger 탭으로 이동하면 Targets에 디버깅 할 수 있는 웹페이지 목록이 보일 것이다.