모바일 디버깅

2,091 views

Published on

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,091
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
14
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

모바일 디버깅

  1. 1. 모바일 웹 디버깅 도구 전용우
  2. 2. 5년 전 Desktop 상황.
  3. 3. 모바일에서 모든걸 디버깅?
  4. 4. Mobile Desktop
  5. 5. Desktop• 디버깅 환경이 좋음.• 쉽게 개발할 수 있음.• 모바일 상황에 특화된 버그가 아닌 경우.
  6. 6. Chrome Developer Tool• Agent 변경• Rotate 가능• Touch이벤트 Emulate• 실험 기능 – Override Geolocation – Override Device Orientaion
  7. 7. Mobile• 일부 제약적인 환경의 브라우저를 제외하 고는 디버깅 환경이 열악함.• 모든 브라우저와 환경에 적합한 디버깅 도 구는 없고 상황에 맞게 사용.
  8. 8. 일부 환경• iOS6 + Mountain Lion – Mobile Safari (링크)• Android 4.0(Ice Cream Sandwich) – Mobile Chrome (링크)• Android 2.2(Froyo) – Mobile Firefox (링크)• Mobile Opera – (링크)
  9. 9. 브라우저 점유율(추정) 3% 4% 11% 6% Safari 6 Safari 5 24% Android 4.x Android 3.x Andorid 2.3 Andorid 2.2 Andorid 2.150% 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. 10. 브라우저 점유율(추정) + 6% 94%
  11. 11. 현실은 아직 삽질 http://www.flickr.com/photos/steelmore/265678915/
  12. 12. 간단한 로그를 확인할 때.• jsconsole(링크) – 간단하게 로깅하고 스크립트를 실행함. – 장점 • 스크립트만 삽입하면 사용 가능. – 단점 • 복잡한 스크립트 실행이나 엘리먼트 확인이 안됨.• 간단히 직접 구현해서 사용.
  13. 13. #1. 추가 기능을 쓰고 싶을 때• wenire(링크) – 데스크탑의 일부 기능을 제공하는 디버거 – 엘리먼트 디버깅 / 콘솔 기능 사용 리소스/네트워크/타임라인 탭의 일부 기능 – 장점 • 데스크탑과 유사한 기능을 제공 • 모바일 디버깅 도구 중 가장 유용 – 단점 • 서버를 실행해야 하는 등 좀 불편함. • 스크립트 디버깅이 안됨.
  14. 14. #2. 추가 기능을 쓰고 싶을 때• Adobe Edge Inspect(구 Shadow)(링크) – wenire을 좀 더 쉽게 사용할 수 있음. – wenire 이외에 다양한 기능들이 있음. – 장점 • 한번 설정하면 쉽게 바로 사용가능 – 단점 • webview에서 실행하기 때문에 실제 브라우저라고 할 수 없음.
  15. 15. 스크립트 디버깅• Aardwolf(링크) – 스크립트에 breakpoint를 설정하고 조절. – instrument code을 삽입하여 실행. – 장점 • breakpoint를 설정 가능한 유일한 도구. • callstack등 데스크탑 스크립트 디버깅와 유사. – 단점 • 매우 불안정하여 실제로 사용하기는 아직 적합하지 않음
  16. 16. ETC• Fiddler을 이용한 디버깅(링크)• 모바일 성능 측정 mobitest(링크)
  17. 17. 미래?• Webkit Remote Debugging Protocol(링크) – Blackberry debugger(링크) – Chome for Android(링크)• Firefox Remote Debugging Protocol(링크) – Firefox for Android(링크)
  18. 18. 감사합니다.

×