1. 모바일 웹 디버깅 도구
전용우

2. 5년 전 Desktop 상황.

3. 모바일에서 모든걸 디버깅?

4. Mobile Desktop

5. Desktop
• 디버깅 환경이 좋음.
• 쉽게 개발할 수 있음.
• 모바일 상황에 특화된 버그가 아닌 경우.

6. Chrome Developer Tool
• Agent 변경
• Rotate 가능
• Touch이벤트 Emulate
• 실험 기능
– Override Geolocation
– Override Device Orientaion

7. Mobile
• 일부 제약적인 환경의 브라우저를 제외하
고는 디버깅 환경이 열악함.
• 모든 브라우저와 환경에 적합한 디버깅 도
구는 없고 상황에 맞게 사용.

8. 일부 환경
• iOS6 + Mountain Lion
– Mobile Safari (링크)
• Android 4.0(Ice Cream Sandwich)
– Mobile Chrome (링크)
• Android 2.2(Froyo)
– Mobile Firefox (링크)
• Mobile Opera
– (링크)

9. 브라우저 점유율(추정)
3%
4%
11% 6%
Safari 6
Safari 5
24% Android 4.x
Android 3.x
Andorid 2.3
Andorid 2.2
Andorid 2.1
50%
2%
http://gs.statcounter.com/#mobile_os-KR-monthly-201109-201209
http://developer.android.com/about/dashboards/index.html
http://tctechcrunch2011.files.wordpress.com/2012/10/1005_ios6update.png

10. 브라우저 점유율(추정)
+
6%
94%

11. 현실은 아직 삽질
http://www.flickr.com/photos/steelmore/265678915/

12. 간단한 로그를 확인할 때.
• jsconsole(링크)
– 간단하게 로깅하고 스크립트를 실행함.
– 장점
• 스크립트만 삽입하면 사용 가능.
– 단점
• 복잡한 스크립트 실행이나 엘리먼트 확인이 안됨.
• 간단히 직접 구현해서 사용.

13. #1. 추가 기능을 쓰고 싶을 때
• wenire(링크)
– 데스크탑의 일부 기능을 제공하는 디버거
– 엘리먼트 디버깅 / 콘솔 기능 사용
리소스/네트워크/타임라인 탭의 일부 기능
– 장점
• 데스크탑과 유사한 기능을 제공
• 모바일 디버깅 도구 중 가장 유용
– 단점
• 서버를 실행해야 하는 등 좀 불편함.
• 스크립트 디버깅이 안됨.

14. #2. 추가 기능을 쓰고 싶을 때
• Adobe Edge Inspect(구 Shadow)(링크)
– wenire을 좀 더 쉽게 사용할 수 있음.
– wenire 이외에 다양한 기능들이 있음.
– 장점
• 한번 설정하면 쉽게 바로 사용가능
– 단점
• webview에서 실행하기 때문에 실제 브라우저라고
할 수 없음.

15. 스크립트 디버깅
• Aardwolf(링크)
– 스크립트에 breakpoint를 설정하고 조절.
– instrument code을 삽입하여 실행.
– 장점
• breakpoint를 설정 가능한 유일한 도구.
• callstack등 데스크탑 스크립트 디버깅와 유사.
– 단점
• 매우 불안정하여 실제로 사용하기는 아직 적합하지
않음

16. ETC
• Fiddler을 이용한 디버깅(링크)
• 모바일 성능 측정 mobitest(링크)

17. 미래?
• Webkit Remote Debugging Protocol(링크)
– Blackberry debugger(링크)
– Chome for Android(링크)
• Firefox Remote Debugging Protocol(링크)
– Firefox for Android(링크)

18. 감사합니다.