WDC 13 - JavaScript Debugging

Transcript

1. JavaScript  Debugging   Wie  kann  es  gehen!   Marcus  Ross  /  @zahlenhelfer   >>>  web-­‐develover-­‐conference.de                                                                                                                                                                                                                #wdc13  
3. Warum  heißt  es  Debugging?   •  1947  -­‐  „First  actual  case  of  bug  being  found.“     •  Grace  Hopper  bei  der  Arbeiten  am  Mark  II   •  Eine  MoPe  sorgte  für  den  Ausfall  eines  Relais   •  Grace  Hopper  hat  die  (tote)  MoPe  in  das   Logbuch  geklebt  und  mit  dem  Satz   beschrieben.  
4. Wie  wird  meist  Debugging  betrieben?   •  Meist  leider:   – alert();   – console.log();   •  Aber  wie  sollte  es  sein?   •  debugger;! •  oder  Chrome/FireBug/Fiddler    
5. Was  ist  das?   FIX:   if (! window.console ) console = {log: function(){}};!
6. console.table?   function Person(firstName, lastName, age) {! this.firstName = firstName;! this.lastName = lastName;! this.age = age;! }! var family = {};! family.mother = new Person("Susan", "Doyle", 32);! family.father = new Person("John", "Doyle", 33);! family.daughter = new Person("Lily", "Doyle", 5);! family.son = new Person("Mike", "Doyle", 8);! console.table(family, ["firstName", "lastName", "age"]);!
7. Ergebnis  
8. Console   •  Boring  oder?   •  Console  ist  aber  auch  Shell   •  Probieren  wir   –  Document.getElementById(„test“);   •  Console  kann  auch  Objekte  ausgeben   –  console.assert(1==1)   –  console.assert(1==2)   –  console.warn   –  console.debug  
9. Mit  6  Error´s  ins  JavaScript   •  Syntax  Error   •  Eval  Error   •  Range  Error   •  URI  Error   •  Type  Error   •  Reference  Error  
10. Syntax  Error   var a = “Hallo“;! a.length(;!
11. Eval  Error   var  abc  =  ‘var  x=”Hallo”;  x.length()’;   eval(abc);  
12. Range  Error   var  a  =  new  Array(4294967295);    //OK   var  b  =  new  Array(-­‐1);  //range  error       var  num  =  2.555555;   document.writeln(num.toExponenkal(4));    //OK   document.writeln(num.toExponenkal(-­‐2));  //range  error!       num  =  2.9999;   document.writeln(num.toFixed(2));      //OK   document.writeln(num.toFixed(25));    //range  error!     num  =  2.3456;   document.writeln(num.toPrecision(1));      //OK   document.writeln(num.toPrecision(22));    //range  error!  
13. URI  Error   decodeURIComponent("%");   //  The  URI  to  be  decoded  is  not  a  valid  encoding  
14. Type  Error   •  var  num  =  234;     •  num.substr(1,1);     •  //uncaught  excepkon:  TypeError:  num.substr   is  not  a  funckon  
15. Reference  Error   •  var  tmp  =  x;     •  //no  x  variable  declared!  
16. Try/Catch  im  Groben   try{      //  Run  some  code  here   }   catch(err){    //  Handle  errors  here   }  
17. Was  haben  wir  gesehen?  
18. Das  echte  Leben!   •  minifizierter  Code  -­‐>  SourceMaps  
19. Also  zum  Schluss...  
20.   >>>  web-­‐develover-­‐conference.de                                                                                                                                                                      #wdc13     Danke   Marcus  Ross  -­‐  @zahlenhelfer   alle  Foilien  auch  auf  www.speakerdeck.com/u/zahlenhelfer