• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
436
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
11
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. RICHTIGES DEBUGGING INJAVASCRIPTWednesday, June 26, 13
  • 2. WER BIN ICH?• Sebastian Springer• https://github.com/sspringer82• @basti_springer• Entwickler @ MayflowerWednesday, June 26, 13
  • 3. AGENDA• Warum Debugging?• Welche Debugger gibt es?• Wie funktioniert Debugging?• WeiterführendeThemenWednesday, June 26, 13
  • 4. WARUM DEBUGGING?Wednesday, June 26, 13
  • 5. WENN’S MAL SCHNELLGEHEN MUSSconsole.log($([name="username"]).val());alert($([name="username"]).val());Wednesday, June 26, 13
  • 6. DER UNTERSCHIED?Wednesday, June 26, 13
  • 7. WENN’S MAL SCHNELLGEHEN MUSSconsole.log($([name="username"]).val());alert($([name="username"]).val());Gibt den Wert aus - das Script läuft weiterWednesday, June 26, 13
  • 8. WENN’S MAL SCHNELLGEHEN MUSSconsole.log($([name="username"]).val());alert($([name="username"]).val());Gibt den Wert aus - und hält das Script anWednesday, June 26, 13
  • 9. WAS HAT DAS JETZT MITDEBUGGING ZUTUN?Wednesday, June 26, 13
  • 10. FUNKTIONEN EINESDEBUGGERS• Steuerung des Programmablaufs - wie mit alert()• Inspizieren von Daten - wie mit alert() und console.log()• Modifizieren von Inhalten - Kombination aus alert() undKonsoleWednesday, June 26, 13
  • 11. WARUM ALSO DEBUGGING• Finden von Fehlern• Anzeige der Umgebung zu einem Zeitpunkt• Testen vonVerhalten bei veränderten BedingungenWednesday, June 26, 13
  • 12. WELCHE DEBUGGER GIBT ES?Wednesday, June 26, 13
  • 13. Wednesday, June 26, 13
  • 14. FIREFOXWednesday, June 26, 13
  • 15. FIREBUGWednesday, June 26, 13
  • 16. CHROMEWednesday, June 26, 13
  • 17. INTERNET EXPLORERWednesday, June 26, 13
  • 18. WIE FUNKTIONIERTDEBUGGING?Wednesday, June 26, 13
  • 19. DEBUGGER STARTENWednesday, June 26, 13
  • 20. DEBUGGER STARTEN$(document).ready(function () {$(button).on(click, function () {debugger;var inputNumber = $([type="number"]).val();$(output).val(fizzbuzz(inputNumber));});});Wednesday, June 26, 13
  • 21. DEBUGGER STARTEN$(document).ready(function () {$(button).on(click, function () {debugger;var inputNumber = $([type="number"]).val();$(output).val(fizzbuzz(inputNumber));});});Wednesday, June 26, 13
  • 22. DEBUGGER STARTENNachteil: Quellcode wird verändert!Wednesday, June 26, 13
  • 23. BREAKPOINTSWednesday, June 26, 13
  • 24. BREAKPOINTS• Haltepunkte• Keine Änderung am Quellcode• Können auf jede Programmzeile gesetzt werden• Halten das Script bei Erreichen anWednesday, June 26, 13
  • 25. BREAKPOINTSWednesday, June 26, 13
  • 26. BREAKPOINTSWednesday, June 26, 13
  • 27. BREAKPOINTSWednesday, June 26, 13
  • 28. NAVIGATIONWednesday, June 26, 13
  • 29. NAVIGATIONWednesday, June 26, 13
  • 30. NAVIGATIONWednesday, June 26, 13
  • 31. NAVIGATIONTypRerunContinueButton Shortcut BedeutungShift - F8Aktuellen Callstack nochmalausführenF8Weiterausführung zum nächstenBreakpointStep intoStep overStep outF11 In eine Funktion hineinspringenF10 Den Aufruf überspringenShift - F11Aus der aktuellen FunktionherausWednesday, June 26, 13
  • 32. SCRIPT AUSWAHLWednesday, June 26, 13
  • 33. SCRIPTAUSWAHL• Alle Scripts der aktuellen Seite• SuchmöglichkeitWednesday, June 26, 13
  • 34. SCRIPTAUSWAHLWednesday, June 26, 13
  • 35. BEDINGTE BREAKPOINTSWednesday, June 26, 13
  • 36. BEDINGTE BREAKPOINTS• Häufig durchlaufene Stellen• Fehler tritt nur bei bestimmten Bedingungen aufWednesday, June 26, 13
  • 37. BEDINGTE BREAKPOINTSWednesday, June 26, 13
  • 38. INHALTE MODIFIZIERENWednesday, June 26, 13
  • 39. INHALTE MODIFIZIEREN• Fehler tritt auf• Testen, ob der Fehler durch veränderte Parameter behobenwirdWednesday, June 26, 13
  • 40. INHALTE MODIFIZIERENWednesday, June 26, 13
  • 41. INHALTE MODIFIZIERENWednesday, June 26, 13
  • 42. INHALTE MODIFIZIERENWednesday, June 26, 13
  • 43. INHALTE MODIFIZIERENWednesday, June 26, 13
  • 44. INHALTE MODIFIZIERENWednesday, June 26, 13
  • 45. BREAK ON ERRORWednesday, June 26, 13
  • 46. BREAK ON ERRORWednesday, June 26, 13
  • 47. BREAK ON ERRORWednesday, June 26, 13
  • 48. STACKTRACEWednesday, June 26, 13
  • 49. STACKTRACE• Stack der bisher aufgerufenen Methoden• Möglichkeit zur NavigationWednesday, June 26, 13
  • 50. STACKTRACEWednesday, June 26, 13
  • 51. WATCH EXPRESSIONSWednesday, June 26, 13
  • 52. WATCH EXPRESSIONS• Werte von Ausdrücken• Variablen• Objekte• Funktionsaufrufe• Wird kontinuierlich aktualisiertWednesday, June 26, 13
  • 53. WATCH EXPRESSIONSWednesday, June 26, 13
  • 54. FUNKTIONIERT DAS IMMER?Wednesday, June 26, 13
  • 55. DEBUG UMGEBUNGEN• Callbacks testen• zeitabhängige Funktionen• Ajax-CallsBreakpoints setzen, ausführen, debuggen.Wednesday, June 26, 13
  • 56. INTERVAL/TIMEOUT• Zeit anhalten• Breakpoint im CallbackWednesday, June 26, 13
  • 57. AJAX• was wurde gesendet, was wurde empfangen• Breakpoint im CallbackWednesday, June 26, 13
  • 58. Wednesday, June 26, 13
  • 59. DEBUGGERWednesday, June 26, 13
  • 60. BEISPIELCODEvar myObj = {a: 1, b: 2};console.log(myObj);myObj.a = Hello;console.log(myObj);for (var i = 0; i < 10; i++) {var helper = function () {// do somethingconsole.log(i)};helper();}Wednesday, June 26, 13
  • 61. DEBUGGER$ node debug debugger.js< debugger listening on port 5858connecting... okbreak in debugger.js:11 var myObj = {a: 1, b: 2};23 console.log(myObj);debug>Wednesday, June 26, 13
  • 62. DEBUGGER$ node debug debugger.js< debugger listening on port 5858connecting... okbreak in debugger.js:11 var myObj = {a: 1, b: 2};23 console.log(myObj);debug>Wednesday, June 26, 13
  • 63. DEBUGGER - STEPKommando Bedeutung Beschreibungn next Fortsetzenc cont Step overs step Step ino out Step outWednesday, June 26, 13
  • 64. DEBUGGER - WATCH• watch(expression)• unwatch(expression)• watchersWednesday, June 26, 13
  • 65. DEBUGGER - WATCHdebug> watch(myObj)debug> nbreak in debugger.js:3Watchers:0: myObj = {"b":2,"a":1}1 var myObj = {a: 1, b: 2};23 console.log(myObj);45 myObj.a = Hello;debug>Wednesday, June 26, 13
  • 66. DEBUGGER - WATCHdebug> watch(myObj)debug> nbreak in debugger.js:3Watchers:0: myObj = {"b":2,"a":1}1 var myObj = {a: 1, b: 2};23 console.log(myObj);45 myObj.a = Hello;debug>Wednesday, June 26, 13
  • 67. DEBUGGER - REPLdebug> replPress Ctrl + C to leave debug repl> myObj{ b: 2, a: 1 }> myObj.b = 14;14> myObj{ b: 14, a: 1 }debug> n< { a: 1, b: 14 }break in debugger.js:5Watchers:0: myObj = {"b":14,"a":1}3 console.log(myObj);45 myObj.a = Hello;67 console.log(myObj);debug>Wednesday, June 26, 13
  • 68. FRAGEN?Wednesday, June 26, 13
  • 69. KONTAKTSebastian Springersebastian.springer@mayflower.deMayflower GmbHMannhardtstr. 680538 MünchenDeutschland@basti_springerhttps://github.com/sspringer82Wednesday, June 26, 13