Debugging - Web 前端程式開發實務

Transcript

1. Copyright © 2012 FITPI. All rights reserved. ሱ໡സℶ
   ⊁ấ భ؊۽ӱῘứℯ↩⇪‣
    ᾣ℩ğᾠקდ
   
   KPTFQIK 1
2. Copyright © 2012 FITPI. All rights reserved. 2 ⊁ấ ๏ -PH
   
   Ῐứದ≇Ⴈ֥ิൕ⇫༏ ๏ &SSPS
   )BOEMJOH
   
   ấ↪ẕ৘Ὠᇅ ๏ #SFBLQPJOU
   
   ০Ⴈ۽ऎሔ䱝↜ⅳ ๏ 'JEEMFS
   
   ೂޅ䍛ഈ⊁ấ Ῐứӱൔࣼ൞၂’Ա֥
   USZ
   BOE
   FSSPS +BWB4DSJQU
   Ⴕଧུٚمࠣ۽ऎିḲᇹ໡ⁿࢳ㢯↜ⅳ଻Ĥ
3. Copyright © 2012 FITPI. All rights reserved. -PH 3 ᅳ↜ⅳቋᆰῒ֥ቔمࣼ൞ᆰࢤ↾ൕ⇫༏ ॖၛޓॹֹᆩ֡ṉ⅂֥ᆴࠇႵ㢻Ⴕ஝֞
4. Copyright © 2012 FITPI. All rights reserved. alert(); 4 Ἶಀ
   +BWB4DSJQU
   ὕ㢻Ⴕਅݺ⊁ấὔ࣢֥ື၂ቔم ֌ၹᾏẪࠣᆰῒ֥หྟa֞⇀ᄝὕ൞ޓӈႨ
5. Copyright © 2012 FITPI. All rights reserved. 5 alert();
6. Copyright © 2012 FITPI. All rights reserved. BMFSU
   ֥∱ಌề 6 ๏ ∱ềğ ❖ ᆰῒğ҂Ⴈν⊬a๙Ⴈᧄૄἠ⏟´ఖb ❖ ๝҄ğॖၛ≚๔⊋ྛ
   +4
   ᄝଢభ֥ྛ⅂b ๏ ಌềğ ❖ ۄ⃺ğၹ๝҄aླေề⇢Ҍି౼ཨb ❖ ޓₒỚॹ෎
   MPPQ
    ྘֥ӱൔቓ⊁ấb ২ೂğၻ Ѭ٢a຀ঘaọ὎
7. Copyright © 2012 FITPI. All rights reserved. console.log(); 7 ạ
   'JSFCVH
   ࠅ޳⏟´ఖຓ㍂
   Ῐ൓෮ิ܂֥ۿି ᗥῲṉӮૄἠ⏟´ఖ֥Ṍ⊵aമᇀᄝ
   /PEFKT
   ္ॖႨ
8. Copyright © 2012 FITPI. All rights reserved. 8 console.log(); http://getfirebug.com/wiki/index.php/Console_API ۲ն⏟´ఖο
   '
   ׻὜ႵῘứ۽ऎ
9. Copyright © 2012 FITPI. All rights reserved. DPOTPMFMPH
   ֥∱ಌề 9 ๏ ∱ềğ ❖ ۄ⃺ྟ֮đն؟⅂౦㣐׻ℳႨb ๏ ಌềğ ❖ *&
   
   ҂ᆦჱaമᇀ὜㸗ളấ↪b ❖ ҂൞ૄἠ⏟´ఖ׻ᆰࢤॖुb ✦ 'JSFGPY
   ֤ν⊬
   'JSFCVHb ❖ 㢻Ḱم
   #MPDL
   ᗥ⇟
   4DSJQU
   ⊋ྛb ✦ ՎℭႨ
   BMFSU
   ࠧॖb ๏ →Ὂ҂ၞa⇔؟ਔّط၂ↀ⁙b ഈ䍛ᗥ҂∣ἐթᄝb
10. Copyright © 2012 FITPI. All rights reserved. Y.log(); 10 :6*
    ⤨ࡹڿਅϱ֥
    DPOTPMFMPHb
11. Copyright © 2012 FITPI. All rights reserved. 11 ӑ؟֥
    -PHđೂޅἾ⁓Ĥ -PH
    ὜ஷ֥֞↜ⅳ
12. Copyright © 2012 FITPI. All rights reserved. 12 ഍ັ℟ק၂༯Ćᆺुఃᇏ၂ἠଆ⊾֥⇫༏ YUI({ logInclude: { “#channel-player”: true } }).use() Y.log(“...”, “info”, “#channel- player”); Y.log(); :MPH .FTTBHF
    ⇫༏
    4FWFSJUZ
    ֩ά
    (SPVQ
    ⊾⦁ 
13. Copyright © 2012 FITPI. All rights reserved. :MPH
    ֥∱ề 13 ๏ ∱ềğ ❖ ॖ၇
    4FWFSJUZ
    JOGP
    XBSO
    FSSPS
    ٳ  đῘứ۽ऎॖᆰࢤቓ
    GJMUFSb ❖ ॖሱị
    (SPVQa๩Ἶ
    :6*
    ֥
    MPH*ODMVEF
    ࠇ
    MPH&YDMVEF
    ℟קቓٳ b ❖ ᄝ൐Ⴈ
    :6*
    ֥భิ༯đૄἠ⏟´ఖ׻ॖၛ Ⴈđࠧ൐
    *&
    ္҂὜Ⴕấ↪b ❖ ࠧ൐ᄝ䍛ഈὔ࣢đ္ॖ๩Ἶ
    :6*
    ֥
    EFCVH
    GBMTF
    Ϝ
    MPH
    Ἤṅb
14. Copyright © 2012 FITPI. All rights reserved. new Y.Console() 14 Ⴈ
    :6*
    㸗ള֥
    $POTPMF
    ॖປಆᆦჱૄ၂ἠ⏟´ఖ Ớᧄ঺Έ⏟´ఖࠇห൹౦㣐
    ళೆൔ༢ⅼ
    ӑݺႨ (new Y.Console()).render(); http://yuilibrary.com/yui/docs/console/ http://yuilibrary.com/yui/docs/console-filters/ ‣↮ğhttp://f2eclass.com/lab/debug/console.html
15. Copyright © 2012 FITPI. All rights reserved. -PH
    ྏ֤ٳཚ 15 ๏ ࡹ∗᾽ਈᾞӱൔ֥ૄἠݦൔֻ၂ྛaᇗေ⊋ྛ ề׻٢ᇂ
    -PHb රቀ䰏֥ۀ୑a⃸໡ⁿಸၞ ಀሔ䱝↜ⅳࠣਔࢳ᾵ἧb ๏ ằӱൔᇏླေնਈ֥
    -PH
    ℭđ⃪၂קေᆷק
    4FWFSJUZ
    ࠣ
    (SPVQ
    Ṛ⅂đٚьᗥ⇟Ἶ⁓b ❖ :6*
    ֥
    MPH*ODMVEF
    MPH&YDMVEF
    EFCVH
    ݺႨĆ ๏ MPPQ
     ֥
    -PH
    FY
    ၻ Ѭ٢Ά؇൙ࡱĎ⃪ሱ ྛᆆሠ൞ڎ൐Ⴈb
16. Copyright © 2012 FITPI. All rights reserved. &SSPS
    )BOEMJOH 16 ằӱൔứളਔấ↪đ໡ⁿἐೂޅẕ৘଻Ĥ
17. Copyright © 2012 FITPI. All rights reserved. &SSPS
    ളଁ䵆௹ 17 瀏覽器錯誤 window.onerror try-catch 錯誤發生 ӱൔ㢯ק൞ڎေສഈ❟ ӱൔ㢯ק൞ڎေສഈ❟ +BWB4DSJQU
    Ῐứದ≇ॖ০Ⴈ
    USZDBUDI
    ∻
    XJOEPXPOFSSPS
    Ṙሂ❣ẕ৘ấ↪
18. Copyright © 2012 FITPI. All rights reserved. try-catch 18 try { // Մೳ။㗞ੜࡨޡతఔࣜᛰ } catch (error) { // ᙛ༗ࡨޡత࣌ީ࠽။ਐೖ // error తሱੑ༗ message ᢛ name alert("ࡨޡྨผҝɿ" + error.name + ", ࡨޡਜଉҝɿ" + error.message); } // ޙ᠃తఔࣜᛰနવՄҎ៺᠃ࣥߦʢআඇࡏ catch த returnʣ Їڭᄝॖି㸗ളấ↪֥ӱൔຓ ჩߟࢿྉɿhttp://www.javascriptkit.com/javatutors/trycatch2.shtml ࿅शɿhttp://f2eclass.com/lab/debug/try-catch.html
19. Copyright © 2012 FITPI. All rights reserved. window.onerror 19 window.onerror = function (message, url, line) { alert([ "JavaScript error: " + message, " on line " + line, " for " + url ].join("")); return false; // false ။៺᠃㗞ੜࡨޡɺtrue ଇ။ᆫ཈ࡨޡ }; ấ↪ẕ৘֥ቋᗥ၂֡ٝ䍛 ჩߟࢿྉɿhttp://dev.opera.com/articles/view/better-error-handling-with-window-onerror/ ࿅शɿhttp://f2eclass.com/lab/debug/window-onerror.html
20. Copyright © 2012 FITPI. All rights reserved. ấ↪ẕ৘ྏ֤ٳཚ 20 ๏ ᾞấ↪ສഈ߭Ḹđх૧ᆺ൞
    USZDBUDI
    ⇭ၝb ❖ UISPX
    OFX
    &SSPS ൐Ⴈᆀሱקấ↪  ๏ XJOEPXPOFSSPS
    ẕ৘ğ ❖ 䍛ഈğ∟ҟấ↪a߭Ḹ֞යڛఖb ❖ Ῐứğ↾ൕấ↪aῘứದ≇с⇜ẕ৘וb ๏ ๷ᾑ๧႕ோğ ❖ IUUQXXXTMJEFTIBSFOFUO[BLBTFOUFSQSJTF KBWBTDSJQUFSSPSIBOEMJOHQSFTFOUBUJPO
21. Copyright © 2012 FITPI. All rights reserved. #SFBLQPJOU 21 ⇀ࣂ֥
    #SPXTFS
    ׻Ⴕ۷ݺ֥
    %FWFMPQFS
    ۽ऎਔ ॖၛႨᆇᆞӱൔῘứٚൔሔ䱝↜ⅳĆ ο
    '
    յῘč*&
    
    ၛഈࠣః෰Ṍ⊵⏟´ఖĎ
22. Copyright © 2012 FITPI. All rights reserved. EFCVHHFS 22 IUUQCMPHNJOJBTQDPNQPTU6TJOH+BWB4DSJQUEFCVHHFSTUBUFNFOUFOUFSCSFBLQPJOUTBTQY Ⴈӱൔ℟ק
    
    #SFBLQPJOU
23. Copyright © 2012 FITPI. All rights reserved. 23 #SFBLQPJOU
    ᇏỗề conditional breakpoint programming breakpoint Step Control
24. Copyright © 2012 FITPI. All rights reserved. 'JEEMFS 24 ૄἠ
    '&
    ׻∣ἐࠃႨ
    'JEEMFS
25. Copyright © 2012 FITPI. All rights reserved. 'JEEMFS
    ൞൉喁Ĥ 25 'JEEMFS
    ᄝ୆ểₔഈđཌྷằᧄࡹ৫ਔ䟥ₘ֥
    1SPYZa၂֌⊋ ྛđ෮Ⴕ֥↌ਫ਼ٿЇ׻὜ῂႮՎ
    1SPYZ
    Άԛ
    
    ᆺေ὜⇔
    +BWB4DSJQUa୆ॖၛỚ୆෮⏟´֥↌∉ቓ಩ޅ൙Ć
26. Copyright © 2012 FITPI. All rights reserved. 26 +BWB4DSJQU
    ӱൔФቋཬ߄ᄸ喁ḰĤ 䍛ഈὔ࣢׻὜⇭⅜ӱൔa㢻
    -PHđᄸ喁
    %FCVH
27. Copyright © 2012 FITPI. All rights reserved. Ấڿ↌ᅟ߭ẖ֥
    3FTQPOTF 
    ྩڿၘῂሂ߭ῲ֥
    +BWB4DSJQU
    ⤨ಸ 
    Ⴗᾗ
    6OMPDL
    GPS
    &EJUJOH 
    ᾞ
    4FTTJPO
    ঘ֞
    "VUP3FTQPOEFS
    ᇏ 27 "VUP3FTQPOEFS
28. Copyright © 2012 FITPI. All rights reserved. ↾ൕ᾵ݔ ໃῲૄՑ
    3FMPBE
    ࣼ὜ၛ୆ྩڿ֥ӱൔῲӯ⇀ ≾Ớ໡ⁿᄝ
    1SPEVDUJPO
    ቓ⊁ấ٤ӈႵḲᇹ 28 "VUP3FTQPOEFS
29. Copyright © 2012 FITPI. All rights reserved. "VUP3FTQPOEFS 29 ӈႨ↌ᅟ֥∄ൔ⃸୆҂ൽڛĤỆᆜ၂༯ϔ
30. Copyright © 2012 FITPI. All rights reserved. ‣↮ğᄝ
    :
    ྍ↙ࡆೆ
    BMFSU Ф
    'JEEMFS
    ڿ⇔ਔĆ
    30
31. Copyright © 2012 FITPI. All rights reserved. 'JEEMFS
    ֥сḾ
    1MVHJOT ๏+BWB4DSJQU
    'PSNBUUFS ๏+40/
    7JFXFS ๏(BMMFSZ http://www.fiddler2.com/fiddler2/extensions.asp 31
32. Copyright © 2012 FITPI. All rights reserved. +BWB4DSJQU
    'PSNBUUFS ᆜ৘⇭⅜Ἶᗥ֥ӱൔ xuite टท࠷খԽաޙత JavaScript ຊိ୞༗Ұߦత JavaScript ඃ੔ཫత኷ඬ྄ 32
33. Copyright © 2012 FITPI. All rights reserved. +40/
    7JFXFS Ⴈ⅀⊯ⅾἭु
    3FTQPOTF⊷ਘ 33
34. Copyright © 2012 FITPI. All rights reserved. (BMMFSZ ᆰࢤु
    4FTTJPO
    ᇏ֥ⅾோ ༗ᅷ༗ਅ૬ɺᰖࣔ໨લબऔతᅷ䈕 34
35. Copyright © 2012 FITPI. All rights reserved. 'JEEMFS4DSJQU ๏ ೖೆ
    NJJJ$BTB
    #BS ๏ ҂๝Ῐứದ≇ὔ࣢్֥㍤ ๏ Ҭೆ
    'JSFCVH
    -JUF
    ࠇ
    :6*
    $POTPMF
    ֩ݺႨ۽ऎ ๏ ਙԛၘي∙aໃي∙֥ሳԱ ๏ ᾋℶଆ⊾⊷⇫ ๏ +BWB4DSJQU$44
    ⇭⅜∻ڎ్֥㍤ 35 ൞
    'JEEMFS
    ቋルն֥ۿିğॖၛሱị⇢Ẫ∻ۿି ၛ༯֥ۿି൞໡㬪
    NJJJ$BTB
    ෮⚧ቔđॖᾳസ⇝؟Ῐứℭᾇ
36. Copyright © 2012 FITPI. All rights reserved. ೖೆ
    NJJJ$BTB
    #BS Чῲс⇜๩Ἶ
    3PVUFSđႨ
    'JEEMFS
    ଆₘ 
    ᇗྍᆜ৘ᗥđࣼ὜ु֞
    NJJJ$BTB
    #BS
    ԛ⇀ᄝ↌∉ቐ༯ٚčՎ㬪ề⇢ᗥ֥⊯㣐Ď 
    Վℭᾋℶჰ൓ࣼ὜ु֞໡ⁿ἗ೖೆ֥⤨ಸ 
    ⇢౼↾ൕଧ⊕ὔ࣢֥
    NJJJ$BTB
    #BS 36
37. Copyright © 2012 FITPI. All rights reserved. ྍᄹ
    'JEEMFS
    ⇢Ẫ 37 ⚧ቔ⇢Ẫđṉ⅂὜թᄝ
    */+&$5*0/@)045
38. Copyright © 2012 FITPI. All rights reserved. ၇ῌṉ⅂ೖೆ
    +4 ၇ῌ
    */+&$5*0/@)045
    ֥҂๝đ὜ೖೆ҂๝ὔ࣢֥
    NJJJ$BTB
    #BS 38 ᄝ
    PO#FGPSF3FTQPOTF
    ℻ԛᆭభ
    ẕ৘ݦൔᇏ
39. Copyright © 2012 FITPI. All rights reserved. 㑌ݸ޻ఔࢣ౎༗ࣗݾత؀ڥ Ҏ Port ၏ეִɼ૾զੋ 5002* Ῐứὔ࣢్㍤ ॹ෎్㍤ↀộᇏ҂๝۽ӱ℩֥Ῐứὔ࣢ 39
40. Copyright © 2012 FITPI. All rights reserved. 'JEEMFS
    ೏൞Ⴕἠ⇢Ẫॖ⅗ℭ్㍤ࣼ෾ٚьਔĆ 40
41. Copyright © 2012 FITPI. All rights reserved. መࡍ্ੋඃ Fiddler ࣗಈሣጯ౸ devm1.corp.miiicasa.com:50020 41
42. Copyright © 2012 FITPI. All rights reserved. 'JSFCVH
    -JUF ᄝཞ
    *&
    ֥⏟´ఖࣼห⦁ႵḲᇹ ೖೆ
    %FCVH
    $POTPMF Ҭೆ
    'JSFCVH
    -JUF
    ࠇ
    :6*
    $POTPMF 42
43. Copyright © 2012 FITPI. All rights reserved. ਙԛي∙ሳԱ ℟ί؟Ἵ∽༢ℭႵห൹֥
    $MBTT
    /BNF
    JOUMUSBOTMBUFE
    JOUMUSBOTMBUBCMF ὕ㢻ي∙۵ي∙ປӮ֥὜ầ҂๝֥
    $44
    $MBTT
    /BNF Ὀ೤іൕὕ㢻ي∙a䌾೤іൕي∙ປӮ ề‥༯ॖࢡԛي∙۽ऎ 43
44. Copyright © 2012 FITPI. All rights reserved. ᾋℶଆ⊾⊷⇫ ྻग़༗ id ሱੑత <div/>ეմɼᴍၷԼ။ग़ݱ alert ࢹᜬ ࡏ։ᚙ؀ڥଧೖࠑࢦྩब။ࣗಈ೺૬᮫䈕Ҋ։޷ 44
45. Copyright © 2012 FITPI. All rights reserved. ్㍤⇭⅜∻ڎ Ῐứὔ࣢֥
    +4$44
    ≁℟׻൞ọⅢކ⟸؟ἠཬẵσ❣ቋཬ߄Ἶ֥b http://a.mimgs.com/fuse?module=space&type=js ୠੋ࠷খԽ။଄੒ Debugging ኷ࠔ೉ 45
46. Copyright © 2012 FITPI. All rights reserved. ్㍤⇭⅜∻ڎ ఃℯᆺေ؟၂ἠ
    OPNJOJGZ
    ֥Ṛ⅂ࠧॖ߭Ἃᆞӈ http://a.mimgs.com/fuse?module=space&type=js&nominify ֌൞ૄՑ׻ေ൭ọڿࠇọӱൔℯᄝޓઐỮĆ 46
47. Copyright © 2012 FITPI. All rights reserved. ్㍤⇭⅜∻ڎ Ⴕ
    'JEEMFS
    ᆇݺĆề⇢၂༯҂Ⴈڿӱൔࣼॖၛु֞㢻ቋཬ߄֥ http://a.mimgs.com/fuse?module=space&type=js FiddlerScript ໵௒؆ᄸʂ 47
48. Copyright © 2012 FITPI. All rights reserved. ‣↮ğೖೆ
    'JSFCVH
    -JUF 48 ๏ յῘ
    $VTUPN3VMFKT
    
    ề⇢
    3VMFT
    
    $VTUPN
    3VMFT
    ๏ ᄹࡆ⇢Ẫğ ᄝ
    DMBTT
    )BOEMFS
    ֥Ῐⅽࡆೆၛ༯ӱൔaթẵđࠧॖᄹࡆ⇢⇊ğ public static RulesOption("Enable Firebug Lite") var IS_INCLUDE_FIREBUG: boolean = false; ๏ ᄝ
    )5.-
    ᇏೖೆ
    +BWB4DSJQU ᅳ֞
    0O#FGPSF3FTQPOTF
    ൙ࡱẕ৘ݦൔđᄝ᾵ඏభࡆೆ’᾵ᇏӱൔ ğIUUQGFDMBTTDPNMBCEFCVHGJEEMFSGJSFCVHUYU ๏ 'JEEMFS4DSJQU
    ܲٚ໓ࡱğ IUUQXXXGJEEMFSDPN'JEEMFS%FW4DSJQU4BNQMFTBTQ
49. Copyright © 2012 FITPI. All rights reserved. 49 ૄἠದ֥ླ౰׻҂෾၂∄đ≾Ṇᆺ൞ἡ୆၂ུℯቔ২ሰ ୆ॖၛམམ൉喁Ọ༆ॖၛ㬪୆ሱ࠭∻ↀộầῲ㸗ᆴ ಖᗥ০Ⴈ
    'JEEMFS4DSJQU
    ῲℯቔĆ Ῐứ୆֥۽ऎĆ  ර֥۽ऎğ $IBSMFT
    %FCVHHJOH
    1SPYZ
    NJUNQSPYZ
50. Copyright © 2012 FITPI. All rights reserved. 50 ⊁ấ
    
    3FWJFX ๏ -PH
    
    ۲⊕⇫༏↾ൕὨᇅ∻
    :6*
    $POTPMF ๏ &SSPS
    )BOEMJOH
    
    USZDBUDI
    ∻
    XJOEPXPOFSSPS
    ೂޅ൐Ⴈ ๏ #SFBLQPJOU
    
    Ῐứ۽ऎೂޅ℟ק
    CSFBLQPJOUb EFCVHHFS ๏ 'JEEMFS
    
    䍛ഈ⊁ấ∻ሱྛῘứ۽ऎ
51. Copyright © 2012 FITPI. All rights reserved. 51 ⊁ấ
    
    3FWJFX ๏ -PH
    
    ۲⊕⇫༏↾ൕὨᇅ∻
    :6*
    $POTPMF ๏ &SSPS
    )BOEMJOH
    
    USZDBUDI
    ∻
    XJOEPXPOFSSPS
    ೂޅ൐Ⴈ ๏ #SFBLQPJOU
    
    Ῐứ۽ऎೂޅ℟ק
    CSFBLQPJOUb EFCVHHFS ๏ 'JEEMFS
    
    䍛ഈ⊁ấ∻ሱྛῘứ۽ऎ
52. Copyright © 2012 FITPI. All rights reserved. 52 Q & A