모바일 웹 디버깅 도구

전용우

5년 전 Desktop 상황.

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

Mobile Desktop

Desktop

• 디버깅 환경이 좋음.

• 쉽게 개발할 수 있음.

• 모바일 상황에 특화된 버그가 아닌 경우.

Chrome Developer Tool

• Agent 변경

• Rotate 가능

• Touch이벤트 Emulate

• 실험 기능

– Override Geolocation

– Override Device Orientaion

Mobile

• 일부 제약적인 환경의 브라우저를 제외하

고는 디버깅 환경이 열악함.

• 모든 브라우저와 환경에 적합한 디버깅 도

구는 없고 상황에 맞게 사용.

일부 환경

• iOS6 + Mountain Lion

– Mobile Safari (링크)

• Android 4.0(Ice Cream Sandwich)

– Mobile Chrome (링크)

• Android 2.2(Froyo)

– Mobile Firefox (링크)

• Mobile Opera– (링크)

브라우저 점유율(추정)

4%6%

24%

2%50%

11%

3%

Safari 6

Safari 5

Android 4.x

Android 3.x

Andorid 2.3

Andorid 2.2

Andorid 2.1

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

브라우저 점유율(추정)

6%

94%

+

현실은 아직 삽질

http://www.flickr.com/photos/steelmore/265678915/

간단한 로그를 확인할 때.

• jsconsole(링크)

– 간단하게 로깅하고 스크립트를 실행함.

– 장점

• 스크립트만 삽입하면 사용 가능.

– 단점

• 복잡한 스크립트 실행이나 엘리먼트 확인이 안됨.

• 간단히 직접 구현해서 사용.

#1. 추가 기능을 쓰고 싶을 때

• wenire(링크)

– 데스크탑의 일부 기능을 제공하는 디버거

– 엘리먼트 디버깅 / 콘솔 기능 사용리소스/네트워크/타임라인 탭의 일부 기능

– 장점• 데스크탑과 유사한 기능을 제공

• 모바일 디버깅 도구 중 가장 유용

– 단점• 서버를 실행해야 하는 등 좀 불편함.

• 스크립트 디버깅이 안됨.

#2. 추가 기능을 쓰고 싶을 때

• Adobe Edge Inspect(구 Shadow)(링크)

– wenire을 좀 더 쉽게 사용할 수 있음.

– wenire 이외에 다양한 기능들이 있음.

– 장점

• 한번 설정하면 쉽게 바로 사용가능

– 단점

• webview에서 실행하기 때문에 실제 브라우저라고

할 수 없음.

스크립트 디버깅

• Aardwolf(링크)

– 스크립트에 breakpoint를 설정하고 조절.

– instrument code을 삽입하여 실행.

– 장점

• breakpoint를 설정 가능한 유일한 도구.

• callstack등 데스크탑 스크립트 디버깅와 유사.

– 단점

• 매우 불안정하여 실제로 사용하기는 아직 적합하지

않음

ETC

• Fiddler을 이용한 디버깅(링크)

• 모바일 성능 측정 mobitest(링크)

미래?

• Webkit Remote Debugging Protocol(링크)

– Blackberry debugger(링크)

– Chome for Android(링크)

• Firefox Remote Debugging Protocol(링크)

– Firefox for Android(링크)

감사합니다.