This document discusses debugging in JavaScript. It introduces debugging tools available in browsers like Firefox, Chrome, and Internet Explorer. It explains how to use breakpoints, step through code, inspect variables, and modify content while debugging. Common debugging techniques like setting breakpoints, navigating code, and examining call stacks are demonstrated. Debugging asynchronous functions, callbacks, and AJAX calls is also addressed.

1. RICHTIGES DEBUGGING IN
JAVASCRIPT
Wednesday, June 26, 13

2. WER BIN ICH?
• Sebastian Springer
• https://github.com/sspringer82
• @basti_springer
• Entwickler @ Mayflower
Wednesday, June 26, 13

3. AGENDA
• Warum Debugging?
• Welche Debugger gibt es?
• Wie funktioniert Debugging?
• WeiterführendeThemen
Wednesday, June 26, 13

4. WARUM DEBUGGING?
Wednesday, June 26, 13

5. WENN’S MAL SCHNELL
GEHEN MUSS
console.log($('[name="username"]').val());
alert($('[name="username"]').val());
Wednesday, June 26, 13

6. DER UNTERSCHIED?
Wednesday, June 26, 13

7. WENN’S MAL SCHNELL
GEHEN MUSS
console.log($('[name="username"]').val());
alert($('[name="username"]').val());
Gibt den Wert aus - das Script läuft weiter
Wednesday, June 26, 13

8. WENN’S MAL SCHNELL
GEHEN MUSS
console.log($('[name="username"]').val());
alert($('[name="username"]').val());
Gibt den Wert aus - und hält das Script an
Wednesday, June 26, 13

9. WAS HAT DAS JETZT MIT
DEBUGGING ZUTUN?
Wednesday, June 26, 13

10. FUNKTIONEN EINES
DEBUGGERS
• Steuerung des Programmablaufs - wie mit alert()
• Inspizieren von Daten - wie mit alert() und console.log()
• Modifizieren von Inhalten - Kombination aus alert() und
Konsole
Wednesday, June 26, 13

11. WARUM ALSO DEBUGGING
• Finden von Fehlern
• Anzeige der Umgebung zu einem Zeitpunkt
• Testen vonVerhalten bei veränderten Bedingungen
Wednesday, June 26, 13

12. WELCHE DEBUGGER GIBT ES?
Wednesday, June 26, 13

13. Wednesday, June 26, 13

14. FIREFOX
Wednesday, June 26, 13

15. FIREBUG
Wednesday, June 26, 13

16. CHROME
Wednesday, June 26, 13

17. INTERNET EXPLORER
Wednesday, June 26, 13

18. WIE FUNKTIONIERT
DEBUGGING?
Wednesday, June 26, 13

19. DEBUGGER STARTEN
Wednesday, 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 STARTEN
Nachteil: Quellcode wird verändert!
Wednesday, June 26, 13

23. BREAKPOINTS
Wednesday, June 26, 13

24. BREAKPOINTS
• Haltepunkte
• Keine Änderung am Quellcode
• Können auf jede Programmzeile gesetzt werden
• Halten das Script bei Erreichen an
Wednesday, June 26, 13

25. BREAKPOINTS
Wednesday, June 26, 13

26. BREAKPOINTS
Wednesday, June 26, 13

27. BREAKPOINTS
Wednesday, June 26, 13

28. NAVIGATION
Wednesday, June 26, 13

29. NAVIGATION
Wednesday, June 26, 13

30. NAVIGATION
Wednesday, June 26, 13

31. NAVIGATION
Typ
Rerun
Continue
Button Shortcut Bedeutung
Shift - F8
Aktuellen Callstack nochmal
ausführen
F8
Weiterausführung zum nächsten
Breakpoint
Step into
Step over
Step out
F11 In eine Funktion hineinspringen
F10 Den Aufruf überspringen
Shift - F11
Aus der aktuellen Funktion
heraus
Wednesday, June 26, 13

32. SCRIPT AUSWAHL
Wednesday, June 26, 13

33. SCRIPTAUSWAHL
• Alle Scripts der aktuellen Seite
• Suchmöglichkeit
Wednesday, June 26, 13

34. SCRIPTAUSWAHL
Wednesday, June 26, 13

35. BEDINGTE BREAKPOINTS
Wednesday, June 26, 13

36. BEDINGTE BREAKPOINTS
• Häufig durchlaufene Stellen
• Fehler tritt nur bei bestimmten Bedingungen auf
Wednesday, June 26, 13

37. BEDINGTE BREAKPOINTS
Wednesday, June 26, 13

38. INHALTE MODIFIZIEREN
Wednesday, June 26, 13

39. INHALTE MODIFIZIEREN
• Fehler tritt auf
• Testen, ob der Fehler durch veränderte Parameter behoben
wird
Wednesday, June 26, 13

40. INHALTE MODIFIZIEREN
Wednesday, June 26, 13

41. INHALTE MODIFIZIEREN
Wednesday, June 26, 13

42. INHALTE MODIFIZIEREN
Wednesday, June 26, 13

43. INHALTE MODIFIZIEREN
Wednesday, June 26, 13

44. INHALTE MODIFIZIEREN
Wednesday, June 26, 13

45. BREAK ON ERROR
Wednesday, June 26, 13

46. BREAK ON ERROR
Wednesday, June 26, 13

47. BREAK ON ERROR
Wednesday, June 26, 13

48. STACKTRACE
Wednesday, June 26, 13

49. STACKTRACE
• Stack der bisher aufgerufenen Methoden
• Möglichkeit zur Navigation
Wednesday, June 26, 13

50. STACKTRACE
Wednesday, June 26, 13

51. WATCH EXPRESSIONS
Wednesday, June 26, 13

52. WATCH EXPRESSIONS
• Werte von Ausdrücken
• Variablen
• Objekte
• Funktionsaufrufe
• Wird kontinuierlich aktualisiert
Wednesday, June 26, 13

53. WATCH EXPRESSIONS
Wednesday, June 26, 13

54. FUNKTIONIERT DAS IMMER?
Wednesday, June 26, 13

55. DEBUG UMGEBUNGEN
• Callbacks testen
• zeitabhängige Funktionen
• Ajax-Calls
Breakpoints setzen, ausführen, debuggen.
Wednesday, June 26, 13

56. INTERVAL/TIMEOUT
• Zeit anhalten
• Breakpoint im Callback
Wednesday, June 26, 13

57. AJAX
• was wurde gesendet, was wurde empfangen
• Breakpoint im Callback
Wednesday, June 26, 13

58. Wednesday, June 26, 13

59. DEBUGGER
Wednesday, June 26, 13

60. BEISPIELCODE
var 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 something
console.log(i)
};
helper();
}
Wednesday, June 26, 13

61. DEBUGGER
$ node debug debugger.js
< debugger listening on port 5858
connecting... ok
break in debugger.js:1
1 var myObj = {a: 1, b: 2};
2
3 console.log(myObj);
debug>
Wednesday, June 26, 13

62. DEBUGGER
$ node debug debugger.js
< debugger listening on port 5858
connecting... ok
break in debugger.js:1
1 var myObj = {a: 1, b: 2};
2
3 console.log(myObj);
debug>
Wednesday, June 26, 13

63. DEBUGGER - STEP
Kommando Bedeutung Beschreibung
n next Fortsetzen
c cont Step over
s step Step in
o out Step out
Wednesday, June 26, 13

64. DEBUGGER - WATCH
• watch(expression)
• unwatch(expression)
• watchers
Wednesday, June 26, 13

65. DEBUGGER - WATCH
debug> watch('myObj')
debug> n
break in debugger.js:3
Watchers:
0: myObj = {"b":2,"a":1}
1 var myObj = {a: 1, b: 2};
2
3 console.log(myObj);
4
5 myObj.a = 'Hello';
debug>
Wednesday, June 26, 13

66. DEBUGGER - WATCH
debug> watch('myObj')
debug> n
break in debugger.js:3
Watchers:
0: myObj = {"b":2,"a":1}
1 var myObj = {a: 1, b: 2};
2
3 console.log(myObj);
4
5 myObj.a = 'Hello';
debug>
Wednesday, June 26, 13

67. DEBUGGER - REPL
debug> repl
Press 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:5
Watchers:
0: myObj = {"b":14,"a":1}
3 console.log(myObj);
4
5 myObj.a = 'Hello';
6
7 console.log(myObj);
debug>
Wednesday, June 26, 13

68. FRAGEN?
Wednesday, June 26, 13

69. KONTAKT
Sebastian Springer
sebastian.springer@mayflower.de
Mayflower GmbH
Mannhardtstr. 6
80538 München
Deutschland
@basti_springer
https://github.com/sspringer82
Wednesday, June 26, 13