Debugging in JavaScript
-
Upload
sebastian-springer -
Category
Technology
-
view
527 -
download
19
Transcript of Debugging in JavaScript
RICHTIGES DEBUGGING IN JAVASCRIPT
Wednesday, June 26, 13
WER BIN ICH?
• Sebastian Springer
• https://github.com/sspringer82
• @basti_springer
• Entwickler @ Mayflower
Wednesday, June 26, 13
AGENDA
• Warum Debugging?
• Welche Debugger gibt es?
• Wie funktioniert Debugging?
• Weiterführende Themen
Wednesday, June 26, 13
WARUM DEBUGGING?
Wednesday, June 26, 13
WENN’S MAL SCHNELL GEHEN MUSS
console.log($('[name="username"]').val());
alert($('[name="username"]').val());
Wednesday, June 26, 13
DER UNTERSCHIED?
Wednesday, June 26, 13
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
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
WAS HAT DAS JETZT MIT DEBUGGING ZU TUN?
Wednesday, June 26, 13
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
WARUM ALSO DEBUGGING
• Finden von Fehlern
• Anzeige der Umgebung zu einem Zeitpunkt
• Testen von Verhalten bei veränderten Bedingungen
Wednesday, June 26, 13
WELCHE DEBUGGER GIBT ES?
Wednesday, June 26, 13
Wednesday, June 26, 13
FIREFOX
Wednesday, June 26, 13
FIREBUG
Wednesday, June 26, 13
CHROME
Wednesday, June 26, 13
INTERNET EXPLORER
Wednesday, June 26, 13
WIE FUNKTIONIERT DEBUGGING?
Wednesday, June 26, 13
DEBUGGER STARTEN
Wednesday, June 26, 13
DEBUGGER STARTEN
$(document).ready(function () { $('button').on('click', function () { debugger; var inputNumber = $('[type="number"]').val();
$('output').val(fizzbuzz(inputNumber)); });});
Wednesday, June 26, 13
DEBUGGER STARTEN
$(document).ready(function () { $('button').on('click', function () { debugger; var inputNumber = $('[type="number"]').val();
$('output').val(fizzbuzz(inputNumber)); });});
Wednesday, June 26, 13
DEBUGGER STARTEN
Nachteil: Quellcode wird verändert!
Wednesday, June 26, 13
BREAKPOINTS
Wednesday, June 26, 13
BREAKPOINTS
• Haltepunkte
• Keine Änderung am Quellcode
• Können auf jede Programmzeile gesetzt werden
• Halten das Script bei Erreichen an
Wednesday, June 26, 13
BREAKPOINTS
Wednesday, June 26, 13
BREAKPOINTS
Wednesday, June 26, 13
BREAKPOINTS
Wednesday, June 26, 13
NAVIGATION
Wednesday, June 26, 13
NAVIGATION
Wednesday, June 26, 13
NAVIGATION
Wednesday, June 26, 13
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
SCRIPT AUSWAHL
Wednesday, June 26, 13
SCRIPTAUSWAHL
• Alle Scripts der aktuellen Seite
• Suchmöglichkeit
Wednesday, June 26, 13
SCRIPTAUSWAHL
Wednesday, June 26, 13
BEDINGTE BREAKPOINTS
Wednesday, June 26, 13
BEDINGTE BREAKPOINTS
• Häufig durchlaufene Stellen
• Fehler tritt nur bei bestimmten Bedingungen auf
Wednesday, June 26, 13
BEDINGTE BREAKPOINTS
Wednesday, June 26, 13
INHALTE MODIFIZIEREN
Wednesday, June 26, 13
INHALTE MODIFIZIEREN
• Fehler tritt auf
• Testen, ob der Fehler durch veränderte Parameter behoben wird
Wednesday, June 26, 13
INHALTE MODIFIZIEREN
Wednesday, June 26, 13
INHALTE MODIFIZIEREN
Wednesday, June 26, 13
INHALTE MODIFIZIEREN
Wednesday, June 26, 13
INHALTE MODIFIZIEREN
Wednesday, June 26, 13
INHALTE MODIFIZIEREN
Wednesday, June 26, 13
BREAK ON ERROR
Wednesday, June 26, 13
BREAK ON ERROR
Wednesday, June 26, 13
BREAK ON ERROR
Wednesday, June 26, 13
STACK TRACE
Wednesday, June 26, 13
STACK TRACE
• Stack der bisher aufgerufenen Methoden
• Möglichkeit zur Navigation
Wednesday, June 26, 13
STACK TRACE
Wednesday, June 26, 13
WATCH EXPRESSIONS
Wednesday, June 26, 13
WATCH EXPRESSIONS
• Werte von Ausdrücken
• Variablen
• Objekte
• Funktionsaufrufe
• Wird kontinuierlich aktualisiert
Wednesday, June 26, 13
WATCH EXPRESSIONS
Wednesday, June 26, 13
FUNKTIONIERT DAS IMMER?
Wednesday, June 26, 13
DEBUG UMGEBUNGEN
• Callbacks testen
• zeitabhängige Funktionen
• Ajax-Calls
Breakpoints setzen, ausführen, debuggen.
Wednesday, June 26, 13
INTERVAL/TIMEOUT
• Zeit anhalten
• Breakpoint im Callback
Wednesday, June 26, 13
AJAX
• was wurde gesendet, was wurde empfangen
• Breakpoint im Callback
Wednesday, June 26, 13
Wednesday, June 26, 13
DEBUGGER
Wednesday, June 26, 13
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
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
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
DEBUGGER - STEP
Kommando Bedeutung Beschreibung
n next Fortsetzen
c cont Step over
s step Step in
o out Step out
Wednesday, June 26, 13
DEBUGGER - WATCH
• watch(expression)
• unwatch(expression)
• watchers
Wednesday, June 26, 13
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
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
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
FRAGEN?
Wednesday, June 26, 13
KONTAKT
Sebastian [email protected]
Mayflower GmbHMannhardtstr. 680538 MünchenDeutschland
@basti_springer
https://github.com/sspringer82
Wednesday, June 26, 13