모바일 디버깅

  • 1,308 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,308
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
10
Comments
0
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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.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. 브라우저 점유율(추정) + 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. 감사합니다.