debugging in javascript

RICHTIGES DEBUGGING IN JAVASCRIPT

Wednesday, June 26, 13

WER BIN ICH?

• Sebastian Springer

• https://github.com/sspringer82

• @basti_springer

• Entwickler @ Mayflower

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

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

$('output').val(fizzbuzz(inputNumber)); });});

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

• Haltepunkte

• Keine Änderung am Quellcode

• Können auf jede Programmzeile gesetzt werden

• Halten das Script bei Erreichen an

BREAKPOINTS

NAVIGATION

NAVIGATIONTyp

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 der bisher aufgerufenen Methoden

• Möglichkeit zur Navigation

STACK TRACE

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

• 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

$ 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 - 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 Springersebastian.springer@mayflower.de

Mayflower GmbHMannhardtstr. 680538 MünchenDeutschland

@basti_springer

https://github.com/sspringer82

debugging in javascript

debugger startennachteil

debugger startenwednesday

inhalte modifizierenwednesday

welche debugger gibt

bedingte breakpointswednesday

wie funktioniert debugging

script anwednesday

wenns mal schnellgehen

Technology

javascript cmpt 281. outline introduction to javascript...

debugging in sap

debugging javascript with chrome

bfma2018 pdfform javascript · getting started debugging in...

debugging chapter 23. outline overview of debugging ...

chapter 10 error handling & debugging javascript can be hard...

chapter html javascript css debugging

javascript debugging tips & tricks

kick ass code editing and end to end javascript debugging

javascript debugging tips and tricks

kharkivjs javascript debugging. know your enemy

javascript debugging logging

t '$6-5&*5 8&5&/4$)11&/ - scriptiebank · years. debugging...

u can’t debug this: detecting javascript anti-debugging

mugshot: deterministic capture and replay for javascript...

what is javascript? embedding javascript with html...

javascript debugging, diagnostic web tools and firefox...

running and debugging perlrunning and debugging perl ......

debugging in php

debugging javascript