JavaScript & Ajax Debugging. Marcel Bsufka

Transkript

1 JavaScript & Ajax Debugging Marcel Bsufka

2 2

3 Agenda 3 1. Was ist JavaScript? a. Merkmale b. Probleme beim Debuggen 2. Debugging Werkzeuge a. Features b. Browserspezifische Debugger 3. Was ist Ajax?

4 Was ist JavaScript? - Merkmale Netscape 2.0 mit LiveScript später JavaScript Skriptsprache, überwiegend für die Webistenoptimierung dynamisch typisiert objektbasiert, d.h. kein Klassenkonzept Überprüfung erst zu Laufzeit

5 Was ist JavaScript? Probleme beim Debuggen 5 überwiegend Laufzeitfehler, die sonst vom Compiler erkannt werden d.h. zur Fehlererkennung muss das Script gestartet werden Dynamische Typisierung mögliche Variablenüberladung Fehler können lange unbemerkt bleiben

6 Was ist JavaScript? Fehler 6 Typografische Fehler (Tippfehler) Syntaktische Fehler (Falsche Verwendung der Syntax) Laufzeit Fehler Logische Fehler (falscher Wert einer Variablen) Konzeptionelle Fehler (äußere Umstände) syntaktischer Fehler logischer Fehler

7 Debugging Werkzeuge - Features 7 HTML anzeigen und verändern CSS anzeigen und verändern JavaScript Konsole und Debugger (inkl. Breakpoints) DOM Anzeige Unterstützung von Frameworks HTTP / Netzwerk Inspektor

8 Debugging Werkzeuge browserspezifische Debugger 8 Firefox Firebug Erweiterungen: FirePHP, FlashBug, FireQuery, Internet Explorer - Internet Explorer Developer Toolbar Opera - Opera Dragonfly Safari / Google Chrome - Web Inspector Firebug Lite kleiner Bruder von Firebug reduzierte Form JavaScript - Bibliothek als browserunabhängiges Entwicklungstool.

9 Debugging Werkzeuge - Firebug 9 Aktuelle Version : (Firefox 4) Vorgänger Version : (Firefox und älter)

10 Debuggingarten Debuggen mit alert 10 früher bequemste Art zu debuggen erzeugt Dialogfenster mit möglicher Ausgabe Pausieren des Codes Aussehen des Mitteilungsfenster abhängig vom Betriebssystem und verwendeten Browser interne Umwandlung in eine Zeichenkette nicht alle Elemente anzeigbar

11 Debuggingarten Log Debugging (1/2) 11 console.log(object[, object,...]) console.debug(object[, object,...]).info,.warn,.error console.dir(object) console.table(data[, columns]) console.time(name) / console.timeend(name) console.trace() console.count(name)

12 Debuggingarten Log Debugging (2/2) 12 console.debug / info / warn / error console.dir(['a','b','c','d']); console.table([['a','b','c','d'],['e','f','g','h'],['i','j','k','l'],['m','n','o','p']]);

13 Debuggingarten alert vs. console.log 13 alert(object) console.log(object)

14 Was ist Ajax? 14 Asynchronous JavaScript and XML Konzept einer asynchronen Datenübertragung zwischen Browser und Server. nachladen/ aktualisieren einzelner Teile der Seite kein reload notwendig Anwendungsbeispiele: Google Facebook VZ - Netzwerke Flickr

15 Quellen Bild: