Debugging in JavaScript
-
Upload
sebastian-springer -
Category
Technology
-
view
512 -
download
19
Transcript of Debugging in JavaScript
![Page 1: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/1.jpg)
RICHTIGES DEBUGGING IN JAVASCRIPT
Wednesday, June 26, 13
![Page 2: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/2.jpg)
WER BIN ICH?
• Sebastian Springer
• https://github.com/sspringer82
• @basti_springer
• Entwickler @ Mayflower
Wednesday, June 26, 13
![Page 3: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/3.jpg)
AGENDA
• Warum Debugging?
• Welche Debugger gibt es?
• Wie funktioniert Debugging?
• Weiterführende Themen
Wednesday, June 26, 13
![Page 4: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/4.jpg)
WARUM DEBUGGING?
Wednesday, June 26, 13
![Page 5: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/5.jpg)
WENN’S MAL SCHNELL GEHEN MUSS
console.log($('[name="username"]').val());
alert($('[name="username"]').val());
Wednesday, June 26, 13
![Page 6: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/6.jpg)
DER UNTERSCHIED?
Wednesday, June 26, 13
![Page 7: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/7.jpg)
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
![Page 8: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/8.jpg)
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
![Page 9: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/9.jpg)
WAS HAT DAS JETZT MIT DEBUGGING ZU TUN?
Wednesday, June 26, 13
![Page 10: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/10.jpg)
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
![Page 11: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/11.jpg)
WARUM ALSO DEBUGGING
• Finden von Fehlern
• Anzeige der Umgebung zu einem Zeitpunkt
• Testen von Verhalten bei veränderten Bedingungen
Wednesday, June 26, 13
![Page 12: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/12.jpg)
WELCHE DEBUGGER GIBT ES?
Wednesday, June 26, 13
![Page 13: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/13.jpg)
Wednesday, June 26, 13
![Page 14: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/14.jpg)
FIREFOX
Wednesday, June 26, 13
![Page 15: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/15.jpg)
FIREBUG
Wednesday, June 26, 13
![Page 16: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/16.jpg)
CHROME
Wednesday, June 26, 13
![Page 17: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/17.jpg)
INTERNET EXPLORER
Wednesday, June 26, 13
![Page 18: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/18.jpg)
WIE FUNKTIONIERT DEBUGGING?
Wednesday, June 26, 13
![Page 19: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/19.jpg)
DEBUGGER STARTEN
Wednesday, June 26, 13
![Page 20: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/20.jpg)
DEBUGGER STARTEN
$(document).ready(function () { $('button').on('click', function () { debugger; var inputNumber = $('[type="number"]').val();
$('output').val(fizzbuzz(inputNumber)); });});
Wednesday, June 26, 13
![Page 21: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/21.jpg)
DEBUGGER STARTEN
$(document).ready(function () { $('button').on('click', function () { debugger; var inputNumber = $('[type="number"]').val();
$('output').val(fizzbuzz(inputNumber)); });});
Wednesday, June 26, 13
![Page 22: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/22.jpg)
DEBUGGER STARTEN
Nachteil: Quellcode wird verändert!
Wednesday, June 26, 13
![Page 23: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/23.jpg)
BREAKPOINTS
Wednesday, June 26, 13
![Page 24: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/24.jpg)
BREAKPOINTS
• Haltepunkte
• Keine Änderung am Quellcode
• Können auf jede Programmzeile gesetzt werden
• Halten das Script bei Erreichen an
Wednesday, June 26, 13
![Page 25: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/25.jpg)
BREAKPOINTS
Wednesday, June 26, 13
![Page 26: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/26.jpg)
BREAKPOINTS
Wednesday, June 26, 13
![Page 27: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/27.jpg)
BREAKPOINTS
Wednesday, June 26, 13
![Page 28: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/28.jpg)
NAVIGATION
Wednesday, June 26, 13
![Page 29: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/29.jpg)
NAVIGATION
Wednesday, June 26, 13
![Page 30: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/30.jpg)
NAVIGATION
Wednesday, June 26, 13
![Page 31: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/31.jpg)
NAVIGATIONTyp
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
![Page 32: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/32.jpg)
SCRIPT AUSWAHL
Wednesday, June 26, 13
![Page 33: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/33.jpg)
SCRIPTAUSWAHL
• Alle Scripts der aktuellen Seite
• Suchmöglichkeit
Wednesday, June 26, 13
![Page 34: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/34.jpg)
SCRIPTAUSWAHL
Wednesday, June 26, 13
![Page 35: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/35.jpg)
BEDINGTE BREAKPOINTS
Wednesday, June 26, 13
![Page 36: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/36.jpg)
BEDINGTE BREAKPOINTS
• Häufig durchlaufene Stellen
• Fehler tritt nur bei bestimmten Bedingungen auf
Wednesday, June 26, 13
![Page 37: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/37.jpg)
BEDINGTE BREAKPOINTS
Wednesday, June 26, 13
![Page 38: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/38.jpg)
INHALTE MODIFIZIEREN
Wednesday, June 26, 13
![Page 39: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/39.jpg)
INHALTE MODIFIZIEREN
• Fehler tritt auf
• Testen, ob der Fehler durch veränderte Parameter behoben wird
Wednesday, June 26, 13
![Page 40: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/40.jpg)
INHALTE MODIFIZIEREN
Wednesday, June 26, 13
![Page 41: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/41.jpg)
INHALTE MODIFIZIEREN
Wednesday, June 26, 13
![Page 42: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/42.jpg)
INHALTE MODIFIZIEREN
Wednesday, June 26, 13
![Page 43: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/43.jpg)
INHALTE MODIFIZIEREN
Wednesday, June 26, 13
![Page 44: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/44.jpg)
INHALTE MODIFIZIEREN
Wednesday, June 26, 13
![Page 45: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/45.jpg)
BREAK ON ERROR
Wednesday, June 26, 13
![Page 46: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/46.jpg)
BREAK ON ERROR
Wednesday, June 26, 13
![Page 47: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/47.jpg)
BREAK ON ERROR
Wednesday, June 26, 13
![Page 48: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/48.jpg)
STACK TRACE
Wednesday, June 26, 13
![Page 49: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/49.jpg)
STACK TRACE
• Stack der bisher aufgerufenen Methoden
• Möglichkeit zur Navigation
Wednesday, June 26, 13
![Page 50: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/50.jpg)
STACK TRACE
Wednesday, June 26, 13
![Page 51: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/51.jpg)
WATCH EXPRESSIONS
Wednesday, June 26, 13
![Page 52: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/52.jpg)
WATCH EXPRESSIONS
• Werte von Ausdrücken
• Variablen
• Objekte
• Funktionsaufrufe
• Wird kontinuierlich aktualisiert
Wednesday, June 26, 13
![Page 53: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/53.jpg)
WATCH EXPRESSIONS
Wednesday, June 26, 13
![Page 54: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/54.jpg)
FUNKTIONIERT DAS IMMER?
Wednesday, June 26, 13
![Page 55: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/55.jpg)
DEBUG UMGEBUNGEN
• Callbacks testen
• zeitabhängige Funktionen
• Ajax-Calls
Breakpoints setzen, ausführen, debuggen.
Wednesday, June 26, 13
![Page 56: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/56.jpg)
INTERVAL/TIMEOUT
• Zeit anhalten
• Breakpoint im Callback
Wednesday, June 26, 13
![Page 57: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/57.jpg)
AJAX
• was wurde gesendet, was wurde empfangen
• Breakpoint im Callback
Wednesday, June 26, 13
![Page 58: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/58.jpg)
Wednesday, June 26, 13
![Page 59: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/59.jpg)
DEBUGGER
Wednesday, June 26, 13
![Page 60: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/60.jpg)
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 something console.log(i) }; helper();}
Wednesday, June 26, 13
![Page 61: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/61.jpg)
DEBUGGER
$ node debug debugger.js< debugger listening on port 5858connecting... okbreak in debugger.js:1 1 var myObj = {a: 1, b: 2}; 2 3 console.log(myObj);debug>
Wednesday, June 26, 13
![Page 62: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/62.jpg)
DEBUGGER
$ node debug debugger.js< debugger listening on port 5858connecting... okbreak in debugger.js:1 1 var myObj = {a: 1, b: 2}; 2 3 console.log(myObj);debug>
Wednesday, June 26, 13
![Page 63: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/63.jpg)
DEBUGGER - STEP
Kommando Bedeutung Beschreibung
n next Fortsetzen
c cont Step over
s step Step in
o out Step out
Wednesday, June 26, 13
![Page 64: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/64.jpg)
DEBUGGER - WATCH
• watch(expression)
• unwatch(expression)
• watchers
Wednesday, June 26, 13
![Page 65: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/65.jpg)
DEBUGGER - WATCH
debug> watch('myObj')debug> nbreak in debugger.js:3Watchers: 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
![Page 66: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/66.jpg)
DEBUGGER - WATCH
debug> watch('myObj')debug> nbreak in debugger.js:3Watchers: 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
![Page 67: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/67.jpg)
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); 4 5 myObj.a = 'Hello'; 6 7 console.log(myObj);debug>
Wednesday, June 26, 13
![Page 68: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/68.jpg)
FRAGEN?
Wednesday, June 26, 13
![Page 69: Debugging in JavaScript](https://reader031.fdocuments.in/reader031/viewer/2022020105/5564b124d8b42a98268b4ed0/html5/thumbnails/69.jpg)
KONTAKT
Sebastian [email protected]
Mayflower GmbHMannhardtstr. 680538 MünchenDeutschland
@basti_springer
https://github.com/sspringer82
Wednesday, June 26, 13