Debugging in JavaScript

RICHTIGES DEBUGGING IN
JAVASCRIPT
Wednesday, June 26, 13

WER BIN ICH?
• Sebastian Springer
• https://github.com/sspringer82
• @basti_springer
• Entwickler @ Mayﬂower

AGENDA
• Warum Debugging?
• Welche Debugger gibt es?
• Wie funktioniert Debugging?
• WeiterführendeThemen

WARUM DEBUGGING?

WENN’S MAL SCHNELL
GEHEN MUSS
console.log($('[name="username"]').val());
alert($('[name="username"]').val());

DER UNTERSCHIED?

GEHEN MUSS
Gibt den Wert aus - das Script läuft weiter

GEHEN MUSS
Gibt den Wert aus - und hält das Script an

WAS HAT DAS JETZT MIT
DEBUGGING ZUTUN?

FUNKTIONEN EINES
DEBUGGERS
• Steuerung des Programmablaufs - wie mit alert()
• Inspizieren von Daten - wie mit alert() und console.log()
• Modiﬁzieren von Inhalten - Kombination aus alert() und
Konsole

WARUM ALSO DEBUGGING
• Finden von Fehlern
• Anzeige der Umgebung zu einem Zeitpunkt
• Testen vonVerhalten bei veränderten Bedingungen

WELCHE DEBUGGER GIBT ES?

FIREFOX

FIREBUG

INTERNET EXPLORER

WIE FUNKTIONIERT
DEBUGGING?

DEBUGGER STARTEN

DEBUGGER STARTEN
$(document).ready(function () {
$('button').on('click', function () {
debugger;
var inputNumber = $('[type="number"]').val();
$('output').val(fizzbuzz(inputNumber));
});
});

DEBUGGER STARTEN
Nachteil: Quellcode wird verändert!

BREAKPOINTS

BREAKPOINTS
• Haltepunkte
• Keine Änderung am Quellcode
• Können auf jede Programmzeile gesetzt werden
• Halten das Script bei Erreichen an

NAVIGATION

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

SCRIPT AUSWAHL

SCRIPTAUSWAHL
• Alle Scripts der aktuellen Seite
• Suchmöglichkeit

SCRIPTAUSWAHL

BEDINGTE BREAKPOINTS

BEDINGTE BREAKPOINTS
• Häuﬁg durchlaufene Stellen
• Fehler tritt nur bei bestimmten Bedingungen auf

INHALTE MODIFIZIEREN

INHALTE MODIFIZIEREN
• Fehler tritt auf
• Testen, ob der Fehler durch veränderte Parameter behoben
wird

BREAK ON ERROR

STACKTRACE

STACKTRACE
• Stack der bisher aufgerufenen Methoden
• Möglichkeit zur Navigation

WATCH EXPRESSIONS

WATCH EXPRESSIONS
• Werte von Ausdrücken
• Variablen
• Objekte
• Funktionsaufrufe
• Wird kontinuierlich aktualisiert

FUNKTIONIERT DAS IMMER?

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

INTERVAL/TIMEOUT
• Zeit anhalten
• Breakpoint im Callback

AJAX
• was wurde gesendet, was wurde empfangen
• Breakpoint im Callback

DEBUGGER

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();
}

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>

DEBUGGER - STEP
Kommando Bedeutung Beschreibung
n next Fortsetzen
c cont Step over
s step Step in
o out Step out

DEBUGGER - WATCH
• watch(expression)
• unwatch(expression)
• watchers

DEBUGGER - WATCH
debug> watch('myObj')
debug> n
Watchers:
0: myObj = {"b":2,"a":1}
1 var myObj = {a: 1, b: 2};
2
4
5 myObj.a = 'Hello';
debug>

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 }
Watchers:
0: myObj = {"b":14,"a":1}
4
5 myObj.a = 'Hello';
6
debug>

FRAGEN?

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

Debugging in JavaScript

Recommended

Recommended

More Related Content

More from Sebastian Springer

More from Sebastian Springer (20)

Recently uploaded

Recently uploaded (20)

Debugging in JavaScript