Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Debugging - Web 前端程式開發實務

Debugging - Web 前端程式開發實務

Joseph Chiang

May 02, 2013
Tweet

More Decks by Joseph Chiang

Other Decks in Programming

Transcript

  1. Copyright © 2012 FITPI. All rights reserved. 2 ⊁ấ ๏

    -PHῘứದ≇Ⴈ֥ิൕ⇫༏ ๏ &SSPS)BOEMJOHấ↪ẕ৘Ὠᇅ ๏ #SFBLQPJOU০Ⴈ۽ऎሔ䱝↜ⅳ ๏ 'JEEMFSೂޅ䍛ഈ⊁ấ Ῐứӱൔࣼ൞၂’Ա֥USZBOEFSSPS +BWB4DSJQUႵଧུٚمࠣ۽ऎିḲᇹ໡ⁿࢳ㢯↜ⅳ଻Ĥ
  2. Copyright © 2012 FITPI. All rights reserved. BMFSU֥∱ಌề 6 ๏

    ∱ềğ ❖ ᆰῒğ҂Ⴈν⊬a๙Ⴈᧄૄἠ⏟´ఖb ❖ ๝҄ğॖၛ≚๔⊋ྛ+4ᄝଢభ֥ྛ⅂b ๏ ಌềğ ❖ ۄ⃺ğၹ๝҄aླေề⇢Ҍି౼ཨb ❖ ޓₒỚॹ෎MPPQ ྘֥ӱൔቓ⊁ấb ২ೂğၻ Ѭ٢a຀ঘaọ὎
  3. Copyright © 2012 FITPI. All rights reserved. console.log(); 7 ạ'JSFCVH

    ࠅ޳⏟´ఖຓ㍂ Ῐ൓෮ิ܂֥ۿି ᗥῲṉӮૄἠ⏟´ఖ֥Ṍ⊵aമᇀᄝ/PEFKT္ॖႨ
  4. Copyright © 2012 FITPI. All rights reserved. DPOTPMFMPH֥∱ಌề 9 ๏

    ∱ềğ ❖ ۄ⃺ྟ֮đն؟⅂౦㣐׻ℳႨb ๏ ಌềğ ❖ *& ҂ᆦჱaമᇀ὜㸗ളấ↪b ❖ ҂൞ૄἠ⏟´ఖ׻ᆰࢤॖुb ✦ 'JSFGPY֤ν⊬'JSFCVHb ❖ 㢻Ḱم#MPDLᗥ⇟4DSJQU⊋ྛb ✦ ՎℭႨBMFSUࠧॖb ๏ →Ὂ҂ၞa⇔؟ਔّط၂ↀ⁙b ഈ䍛ᗥ҂∣ἐթᄝb
  5. Copyright © 2012 FITPI. All rights reserved. 12 ഍ັ℟ק၂༯Ćᆺुఃᇏ၂ἠଆ⊾֥⇫༏ YUI({

    logInclude: { “#channel-player”: true } }).use() Y.log(“...”, “info”, “#channel- player”); Y.log(); :MPH .FTTBHF⇫༏ 4FWFSJUZ֩ά (SPVQ⊾⦁ 
  6. Copyright © 2012 FITPI. All rights reserved. :MPH֥∱ề 13 ๏

    ∱ềğ ❖ ॖ၇4FWFSJUZ JOGP XBSO FSSPS ٳ  đῘứ۽ऎॖᆰࢤቓGJMUFSb ❖ ॖሱị(SPVQa๩Ἶ:6*֥MPH*ODMVEF ࠇMPH&YDMVEF℟קቓٳ b ❖ ᄝ൐Ⴈ:6*֥భิ༯đૄἠ⏟´ఖ׻ॖၛ Ⴈđࠧ൐*&္҂὜Ⴕấ↪b ❖ ࠧ൐ᄝ䍛ഈὔ࣢đ္ॖ๩Ἶ:6*֥ EFCVHGBMTFϜMPHἬṅb
  7. 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
  8. 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
  9. Copyright © 2012 FITPI. All rights reserved. &SSPSളଁ䵆௹ 17 瀏覽器錯誤

    window.onerror try-catch 錯誤發生 ӱൔ㢯ק൞ڎေສഈ❟ ӱൔ㢯ק൞ڎေສഈ❟ +BWB4DSJQUῘứದ≇ॖ০Ⴈ USZDBUDI∻XJOEPXPOFSSPS Ṙሂ❣ẕ৘ấ↪
  10. 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
  11. 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
  12. Copyright © 2012 FITPI. All rights reserved. ấ↪ẕ৘ྏ֤ٳཚ 20 ๏

    ᾞấ↪ສഈ߭Ḹđх૧ᆺ൞USZDBUDI⇭ၝb ❖ UISPXOFX&SSPS ൐Ⴈᆀሱקấ↪  ๏ XJOEPXPOFSSPSẕ৘ğ ❖ 䍛ഈğ∟ҟấ↪a߭Ḹ֞යڛఖb ❖ Ῐứğ↾ൕấ↪aῘứದ≇с⇜ẕ৘וb ๏ ๷ᾑ๧႕ோğ ❖ IUUQXXXTMJEFTIBSFOFUO[BLBTFOUFSQSJTF KBWBTDSJQUFSSPSIBOEMJOHQSFTFOUBUJPO
  13. Copyright © 2012 FITPI. All rights reserved. #SFBLQPJOU 21 ⇀ࣂ֥#SPXTFS׻Ⴕ۷ݺ֥%FWFMPQFS۽ऎਔ

    ॖၛႨᆇᆞӱൔῘứٚൔሔ䱝↜ⅳĆ ο'յῘč*&ၛഈࠣః෰Ṍ⊵⏟´ఖĎ
  14. Copyright © 2012 FITPI. All rights reserved. 'JEEMFS൞൉喁Ĥ 25 'JEEMFSᄝ୆ểₔഈđཌྷằᧄࡹ৫ਔ䟥ₘ֥1SPYZa၂֌⊋

    ྛđ෮Ⴕ֥↌ਫ਼ٿЇ׻὜ῂႮՎ1SPYZΆԛᆺေ὜⇔ +BWB4DSJQUa୆ॖၛỚ୆෮⏟´֥↌∉ቓ಩ޅ൙Ć
  15. Copyright © 2012 FITPI. All rights reserved. +BWB4DSJQU'PSNBUUFS ᆜ৘⇭⅜Ἶᗥ֥ӱൔ xuite

    टท࠷খԽաޙత JavaScript ຊိ୞༗Ұߦత JavaScript ඃ੔ཫత኷ඬ྄ 32
  16. Copyright © 2012 FITPI. All rights reserved. 'JEEMFS4DSJQU ๏ ೖೆNJJJ$BTB#BS

    ๏ ҂๝Ῐứದ≇ὔ࣢్֥㍤ ๏ Ҭೆ'JSFCVH-JUFࠇ:6*$POTPMF֩ݺႨ۽ऎ ๏ ਙԛၘي∙aໃي∙֥ሳԱ ๏ ᾋℶଆ⊾⊷⇫ ๏ +BWB4DSJQU$44⇭⅜∻ڎ్֥㍤ 35 ൞'JEEMFSቋルն֥ۿିğॖၛሱị⇢Ẫ∻ۿି ၛ༯֥ۿି൞໡㬪NJJJ$BTB෮⚧ቔđॖᾳസ⇝؟Ῐứℭᾇ
  17. Copyright © 2012 FITPI. All rights reserved. 㑌ݸ޻ఔࢣ౎༗ࣗݾత؀ڥ Ҏ Port

    ၏ეִɼ૾զੋ 5002* Ῐứὔ࣢్㍤ ॹ෎్㍤ↀộᇏ҂๝۽ӱ℩֥Ῐứὔ࣢ 39
  18. Copyright © 2012 FITPI. All rights reserved. ਙԛي∙ሳԱ ℟ί؟Ἵ∽༢ℭႵห൹֥$MBTT/BNF JOUMUSBOTMBUFE

    JOUMUSBOTMBUBCMF ὕ㢻ي∙۵ي∙ປӮ֥὜ầ҂๝֥$44$MBTT/BNF Ὀ೤іൕὕ㢻ي∙a䌾೤іൕي∙ປӮ ề‥༯ॖࢡԛي∙۽ऎ 43
  19. Copyright © 2012 FITPI. All rights reserved. ᾋℶଆ⊾⊷⇫ ྻग़༗ id

    ሱੑత <div/>ეմɼᴍၷԼ။ग़ݱ alert ࢹᜬ ࡏ։ᚙ؀ڥଧೖࠑࢦྩब။ࣗಈ೺૬᮫䈕Ҋ։޷ 44
  20. Copyright © 2012 FITPI. All rights reserved. ‣↮ğೖೆ'JSFCVH-JUF 48 ๏

    յῘ$VTUPN3VMFKT ề⇢3VMFT$VTUPN3VMFT ๏ ᄹࡆ⇢Ẫğ ᄝDMBTT)BOEMFS֥Ῐⅽࡆೆၛ༯ӱൔaթẵđࠧॖᄹࡆ⇢⇊ğ public static RulesOption("Enable Firebug Lite") var IS_INCLUDE_FIREBUG: boolean = false; ๏ ᄝ)5.-ᇏೖೆ+BWB4DSJQU ᅳ֞0O#FGPSF3FTQPOTF൙ࡱẕ৘ݦൔđᄝ᾵ඏభࡆೆ’᾵ᇏӱൔ ğIUUQGFDMBTTDPNMBCEFCVHGJEEMFSGJSFCVHUYU ๏ 'JEEMFS4DSJQUܲٚ໓ࡱğ IUUQXXXGJEEMFSDPN'JEEMFS%FW4DSJQU4BNQMFTBTQ
  21. Copyright © 2012 FITPI. All rights reserved. 50 ⊁ấ3FWJFX ๏

    -PH۲⊕⇫༏↾ൕὨᇅ∻:6*$POTPMF ๏ &SSPS)BOEMJOHUSZDBUDI∻ XJOEPXPOFSSPSೂޅ൐Ⴈ ๏ #SFBLQPJOUῘứ۽ऎೂޅ℟ק CSFBLQPJOUb EFCVHHFS ๏ 'JEEMFS䍛ഈ⊁ấ∻ሱྛῘứ۽ऎ
  22. Copyright © 2012 FITPI. All rights reserved. 51 ⊁ấ3FWJFX ๏

    -PH۲⊕⇫༏↾ൕὨᇅ∻:6*$POTPMF ๏ &SSPS)BOEMJOHUSZDBUDI∻ XJOEPXPOFSSPSೂޅ൐Ⴈ ๏ #SFBLQPJOUῘứ۽ऎೂޅ℟ק CSFBLQPJOUb EFCVHHFS ๏ 'JEEMFS䍛ഈ⊁ấ∻ሱྛῘứ۽ऎ