Android/iOS mobile web debugging

Google Chrome 이나 Firefox, Safari 그리고 아쉽지만 그런대로 Internet Explorer까지 모두 개발자 도구를 지원하여 DOM 구조를 보거나 요청별 응답시간을 추적하거나 CSS를 살펴보거나 할 수 있다.
이건 너무 편하고 당연해서 우리가 모바일 환경(Android/iOS)에서 같은 환경을 사용할 수 없는게 모바일 웹 개발의 어려운 점이기도 한데.
역시 찾아보니 방법이 있다.

먼저 iOS 같은 경우는 설정 > Safari > 고급 > 웹속성 을 켜주면
iOS장비와 Safari가 깔린 컴퓨터를 서로 연결하여 개발자용 메뉴 > (해당 기기 이름) 을 통해 접근가능하다.
물론 컴퓨터용 Safari에서 미리 환경>고급>메뉴 막대에서 개발자용 메뉴 보기 를 체크해줘야한다.

그리고 Android의 경우 Chrome for Android 가 있다면 좀 더 좋은 환경을 제공한다.

https://developers.google.com/chrome/mobile/docs/debugging 내용 참조.
USB 연결 후 adb devices 에서 장비 연결을 확인하고
Chrome for Anroid 에서 Settings > Advanced > Developer tools 로 들어가 Enable USB Web debugging 를 체크
그다음 adb forward tcp:9222 localabstract:chrome_devtools_remote 를 실행해서 9222 포트를 연결하고
크롬에서 localhost:9222를 띄워서 디버깅할 창을 선택하면 된다.
https://developers.google.com/chrome-developer-tools/docs/timeline 도 같이 쓸 수 있따.

센스가 있는 분들이라면 iOS건 Android건 에뮬/시뮬을 통해서도 할 수 있지 않을까라고 생각할 수도 있을텐데
맞다. iOS Simulator나 AndroVM(http://androvm.org/blog/download/) 같은 걸 사용해도 무방하다.
USB를 장비랑 주렁주렁다는 연결하는 것보다 능률도 높고 간편하므로 이쪽을 추천한다.