모바일 웹을 디버깅할 수 있는 다양한 도구와 방법들을 살펴봅니다.

1. 모바일 웹 디버깅
h"ps://www.flickr.com/photos/lukew/10412439655/
2014/08/01
네이버_박재성

2. 8IPJTUIJTHVZ

3.
공통플랫폼 개발랩 Jindo 프레임워크 개발
자바스크립트 UI 개발과 Jindo 프레임워크
- 2012년 문화체육관광부 우수 학술도서 선정
hp://book.naver.com/bookdb/book_detail.nhn?bid=6749231
자바스크립트 성능 이야기
hp://book.naver.com/bookdb/book_detail.nhn?bid=7006583
▪ HTML5 KIG Web Apps 서브그룹 그룹장
▪ W3C HTML5 Day ASIA Conference 2012 – “Web Audio API”
▪ W3C와 함께하는 HTML5의 핵심기술 CSS 국제 워크숍 – “CSS Functions”

4. 핊캏캫콛픦싢쩒밓
켆뮮헒폊퓒캫캫맏졂팓쿦잞않쁢섾˘
칺앚슲몮팓쿦쁢멚퓒캫펞홙힎팘삲쁢쫂삲묺
핂핂쯚많홎빹몮훊젇픒많쪛멚잖훊
4#4킪쁂큲쫂솒hp://news.naver.com/main/read.nhn?oid=055aid=0000282933
hps://www.flickr.com/photos/jm3/14422223957/
ˑ
˒

5. 뫊먾섾큲
à
hps://www.modern.ie/en-­‐us/ie6countdown

6. àIUUQTEFWFMPQFSBQQMFDPNTVQQPSUBQQTUPSF
J04򔪫윮
믾훎

7. OESPJE򔪫윮
믾훎
àIUUQEFWFMPQFSBOESPJEDPNBCPVUEBTICPBSETJOEFYIUNM1MBUGPSN
뼒믾훎OESPJE캏
àIUUQPQFOTJHOBMDPNSFQPSUTGSBHNFOUBUJPO

8. 핺졶짢핊 팖슪옪핂슪
펞컮˘
솧핊쩒헒핂않솒
졶셆펞싾읆
à OESPJE
à 헪혾칺펞컪핞
à 캊컿픦몋푾
DISPNJVN픒믾짦픊옪핞
읊맪짪
à OESPJE ,JU,BU
쭎
믾짦픊옪믆얺빦˘

9. 6TFSHFOU
OBWJHBUPSVTFSHFOU줆핞폂펞헪혾칺졶셆졓핂
▪ 캊컿맲얻킪4OESPJE
Mozilla/5.0 (Linux; U; Android 4.4.2; ko-kr; SAMSUNG SM-G900S
Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Version/1.6
Chrome/28.0.1500.94 Mobile Safari/537.36
▪ -(0QUJNVT(OESPJE
Mozilla/5.0 (Linux; U; Android 4.1.2; ko-kr; LG-F180S
Build/KOT49I.F350S10g) AppleWebKit/537.36 (KHTML, like Gecko)
Version/4.0 Chrome/30.0.1599.103 Mobile Safari/537.36 X

10. ӗOESPJE04쪒쯚않푾헎
OESPJE04쩒헒 엚섢잏펢힒 믾쫆쯚않푾헎 삶잞믾
OESPJEY 8FC,JU TUPDLCSPXTFS
OESPJEY 8FC,JU TUPDLCSPXTFS
OESPJEY 8FC,JU TUPDLCSPXTFS
OESPJEY 8FC,JU
TUPDLCSPXTFS
$ISPNJVN /FYVT
믾쫆쯚않푾헎옪$ISPNFGPSOESPJE
OESPJEY 8FC,JU
TUPDLCSPXTFS
$ISPNJVN 맲얻킪4
맲얻킪뽆
믾쫆쯚않푾헎옪4#SPXTFS
OESPJEY
8FC,JU TUPDLCSPXTFS
#MJOL $ISPNJVN 맲얻킪4
맲얻킪뽆
믾쫆쯚않푾헎옪4#SPXTFS
OESPJEY #MJOL $ISPNJVN
맲얻킪4
믾쫆쯚않푾헎옪4#SPXTFS
/FYVT
믾쫆쯚않푾헎옪$ISPNFGPSOESPJE
몋

11.
hp://jindo.dev.naver.com/blog/2014/02/579

12. 맪짪짝믾쿮힎풞

14. 싢쩒밓솒묺

15.
• J04몋
• XFJOSF
• $ISPNF%FW5PPM
à3FNPUF%FCVHHJOH
à1PSU'PSXBSEJOH
• 'JEEMFS

16. IUUQTEFWFMPQFSBQQMFDPNMJCSBSZJPTEPDVNFOUBUJPO*%T$PODFQUVBMJ04@4JNVMBUPS@(VJEF

17. J044JNVMBUPS

18.
9DPEF1SFGFSFODFTEPXOMPBET$PNQPOFOUT쩒헒펞싾읆

19. J044BGBSJ

20. 049

21. .PVOUBJO-JPO

22.
4BGBSJ펞컪64#펾멾픒

23. IUUQQFPQMFBQBDIFPSH_QNVFMMSXFJOSFEPDTMBUFTU

24. XFJOSF 8C*/TQFDUPS3NPUF

25.
• 8FC,JU믾짦픦쯚않푾헎펞컪잚칺푷많쁳젾
퓇
• 앹캏뫎펔핂졶숞칺푷많쁳
• 핞짢큲

26. XFJOSF컲

27.
• OPEFKT믾짦
• OQN픊옪컲
• 컪쩒킲
sudo npm -g install weinre
Y
XFJOSFCPVOE)PTUIUUQ1PSU
XFJOSFCPVOE)PTUˊBMMIUUQ1PSU
weinre --boundHost host-ip|host-name|-all- --httpPort port-number

28. XFJOSF큲

29.
script src=http://host-ip:port-number
/target/target-script-min.js#id/script

30. XFJOSF맪짪핞솒묺

31.
$MJFOU6*펞헟믊펺싢쩒밓
http://host-ip:port-number/client/

32. XFJOSFPOMJOFIPTU

33.
힏헟컲
àIUUQEFCVHCVJMEQIPOFHBQDPN
샎캏핂힎펞큲
script src=http://debug.build.phonegap.com/target/target-script-min.js#id/script
http://debug.build.phonegap.com/client/#id
#

34. %FW5PPMT
IUUQTEFWFMPQFSDISPNFDPNIPNFEFWUPPMTQJMMBS

35. $ISPNF%FW5PPMT

36.
▪졶짢핊펞쥺엖핂켦
▪뻲풛콛솒킪쥺엖핂켦 DISPNF

37. ▪(14퓒

38. $ISPNF%FW5PPMT3FNPUF%FCVHHJOH

39.
▪팖슪옪핂슪펞컪ˎ컲헣맪짪핞퐃켦64#싢쩒밓ˏ򰨺
▪049몋펞컪쁢쪒솒픦슪않핂쩒컲
▪8JOEPXT펞컪쁢샇믾믾픦64#슪않핂쩒컲
IUUQEFWFMPQFSBOESPJEDPNUPPMTFYUSBTPFNVTCIUNM%SJWFST
▪OESPJE

40. 쭎
à훊콚
hps://developer.chrome.com/devtools/docs/remote-­‐debugging

41. $ISPNF%FW5PPMT4DSFFO$BTU

42.
펾멾쇪졶짢핊믾믾픦졂핂섾큲

43. $ISPNF%FW5PPMT1PSUGPSXBSEJOH

44.
1PSUGPSXBSEJOH픎졶짢핊믾믾많맪짪컪쩒퐎맧픎뻲풚졶짢핊믾
믾펞컪맪짪컪쩒픦퓇핂힎헟믊핂펂엲풂몋푾칺푷쇮쿦핖픊젾
64#읊
▪헟믊몮핞쁢컪쩒펞힎헣많폂엲핖펂퍊삲

45. $ISPNF%FW5PPMT8FC7JFX

46.
퓇쮾펞컪싢쩒밓픒칺푷믾퓒컮
▪ OESPJE

47. ,JU,BU
쭎
if(Build.VERSION.SDK_INT = Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}

48. $ISPNF%FW5PPMT믾펃헞

49.
▪ OESPJE ,JU,BU
8FC7JFX
IUUQTEFWFMPQFSTHPPHMFDPNDISPNFNPCJMFEPDTXFCWJFXPWFSWJFXXIBU@WFSTJPO@PG@DISPNF@JT@JU@CBTFE@PO
팖슪옪핂슪퓇쮾쁢
믆얺빦˘
04펓섾핂많쇦힎팘쁢핂캏쯚않푾헎핞
DISPNF픒믾짦픊옪힎팘픚
à(BMBYZ4쁢OESPJE핂힎잚
쯚않푾헎쁢DISPNJVN픒믾짦

50. IUUQXXXUFMFSJLDPNEEMFS

51. 'JEEMFS

52.
▪ 퓇싢쩒밓옫킪옪
픟샃픒

53. 'JEEMFS1SPYZ컲헣

54.
칺푷훟핆
XFCSFRVFTU읊
5PPMT'JEEMFS0QUJPOT$POOFDUJPOT
'JEEMFSMJTUFOPOQPSU힎헣
MMPXSFNPUFDPNQVUFSTUPDPOOFDU򰨺

55. 'JEEMFS삶잞믾컲헣

56.
삶잞믾
뻲풚
옫킪쿦솧컲헣
옫킪큲짝핓엳

57. 'JEEMFS앦

58.
삶잞믾펞컪푢

59. 'JEEMFSVUP3FTQPOEFS

60.
헣푢
EE3VMF3VMFEJUPS펞컪샎

61. 믾

62.
뻲풚
049/FUXPSL-JOL$POEJUJPOFS
IUUQTEFWFMPQFSBQQMFDPNEPXOMPBETJOEFYBDUJPO
R/FUXPSL-JOL$POEJUJPOFS
'JEEMFS$POOFDUJPO4JNVMBUPS
IUUQXXXMPHJDXPSYDPNJOEFYQIQUPPMTBOEBQQTEEMFSDPOOFDUJPOTJNVMBUPS

63. 싢쩒밓칺옎(BMBYZ킪읺흖펞컪픦ˎ핋믾졶슪ˏ

64.
ˎ핋믾졶슪 3FBEFS.PEF
ˏ
쯚않푾힣몮핖쁢핺핂힎펞믾칺퐎
푷핞많큋멚핋픒쿦핖솒옫묺컿훊쁢
믾쁳
캏
OESPJE핂헒쩒헒핂컲
삶잞믾펞컪핋믾졶슪많컿쇦쁢몋푾
핒픦픦%0.핂
hp://jindo.dev.naver.com/blog/2014/04/627

65. 'F

66. CMPH

67.
삲퍟졶짢핊몋펞컪픦쩒믆퐎멾짷쩣뫃퓮
àIUUQKJOEPEFWOBWFSDPNCMPH

68. 몮잧킃삖삲
hps://www.flickr.com/photos/franzlife/830424476