debugging in javascript

RICHTIGES DEBUGGING IN JAVASCRIPT

Wednesday, June 26, 13

WER BIN ICH?

• Sebastian Springer

• https://github.com/sspringer82

• @basti_springer

• Entwickler @ Mayflower


https://github.com/sspringer82


AGENDA

• Warum Debugging?

• Welche Debugger gibt es?

• Wie funktioniert Debugging?

• Weiterführende Themen


WARUM DEBUGGING?


WENN’S MAL SCHNELL GEHEN MUSS

console.log($('[name="username"]').val());

alert($('[name="username"]').val());


DER UNTERSCHIED?





Gibt den Wert aus - das Script läuft weiter





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


WAS HAT DAS JETZT MIT DEBUGGING ZU TUN?


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


WARUM ALSO DEBUGGING

• Finden von Fehlern

• Anzeige der Umgebung zu einem Zeitpunkt

• Testen von Verhalten bei veränderten Bedingungen


WELCHE DEBUGGER GIBT ES?


FIREFOX


FIREBUG


CHROME


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


BREAKPOINTS


NAVIGATION


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


SCRIPT AUSWAHL


SCRIPTAUSWAHL

• Alle Scripts der aktuellen Seite

• Suchmöglichkeit


SCRIPTAUSWAHL


BEDINGTE BREAKPOINTS



• Häufig durchlaufene Stellen

• Fehler tritt nur bei bestimmten Bedingungen auf


INHALTE MODIFIZIEREN



• Fehler tritt auf

• Testen, ob der Fehler durch veränderte Parameter behoben wird


BREAK ON ERROR


STACK TRACE


STACK TRACE

• Stack der bisher aufgerufenen Methoden

• Möglichkeit zur Navigation


STACK TRACE


WATCH EXPRESSIONS


WATCH EXPRESSIONS

• Werte von Ausdrücken

• Variablen

• Objekte

• Funktionsaufrufe

• Wird kontinuierlich aktualisiert


WATCH EXPRESSIONS


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


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


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>


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> 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>


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>


FRAGEN?


KONTAKT

Sebastian [email protected]

Mayflower GmbHMannhardtstr. 680538 MünchenDeutschland

@basti_springer



mailto:[email protected]

mailto:[email protected]



debugging in javascript

Technology

debugger startennachteil

debugger startenwednesday

inhalte modifizierenwednesday

welche debugger gibt

bedingte breakpointswednesday

wie funktioniert debugging

script anwednesday

wenns mal schnellgehen