Debugging in JavaScript
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Debugging in JavaScript

on

  • 667 views

 

Statistics

Views

Total Views
667
Views on SlideShare
664
Embed Views
3

Actions

Likes
0
Downloads
9
Comments
0

1 Embed 3

https://twitter.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Debugging in JavaScript Presentation 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