Fehlerteufel
Kommentare

Jetzt werden nur etwa elf Funktionen aufgelistet, abhängig von Browser und Version. Daran sieht man, dass man nicht nur die komplette Sprache JavaScript, sondern auch die komplette Umgebung der Webseite,

Jetzt werden nur etwa elf Funktionen aufgelistet, abhängig von Browser und Version. Daran sieht man, dass man nicht nur die komplette Sprache JavaScript, sondern auch die komplette Umgebung der Webseite, die man geladen hat, in die Hand bekommt. Man kann nicht nur ein bisschen debuggen und Variablen inspizieren, sondern beim Entwickeln der Seite aktiv in deren Kontext arbeiten. Das heißt für die Entwicklung, öfter mal die eine oder andere Funktionalität vorher im Firebug „auszuprogrammieren“. Danach kann man den Code – von dem man weiß, dass er im Browser funktioniert – in seine JavaScript-Dateien einfügen. Das ist sehr praktisch, wenn es um etwas diffizilere Angelegenheiten wie das genaue Timing einer Animation oder ungewohnte APIs geht. „Theoretisches“ Programmieren und das Überprüfen und Debuggen nach einem Reload der Seite dauert sicherlich ein Vielfaches der Zeit. Das kann man jedoch auch noch etwas weiter treiben.

toString() is your Big Brother

Es gibt Webapplikationen und insbesondere Use Cases, die schwer nachzuvollziehen oder zu reproduzieren sind. Auch in solchen Fällen hilft Firebug oft, Fehler an Ort und Stelle zu beheben und auch sofort zu testen. Dabei ist die Methode toString sehr nützlich: Bei der Umwandlung in einen String ruft JavaScript die Objekte dieser Methode auf. In Abbildung 3 sehen Sie ein Beispiel dafür. Darin sehen wir den Sourcecode, der console.log definiert. Es wäre ein Leichtes, diesen zur Laufzeit zu ändern, im Fall des Debuggens zu korrigieren und an Ort und Stelle – ohne Reload – wieder auszuprobieren:

console.log = function(){ alert("Ich log nix mehr") }
function()
console.log(1)

In der ersten Zeile überschreiben wir die aktuelle Funktion console.log mit einer, die die Arbeit verweigert. Der Test darunter zeigt, dass unser Vorhaben erfolgreich war. Genauso könnte man einen Bug beheben oder eine Funktionalität wie gewünscht testweise implementieren. Nach einem erfolgreichen Real-Life-Test kann man diese in den eigentlichen Sourcecode übernehmen.

Abb. 3: Sourcecode, der console.log definiert
Inspizieren mit console.profile und trace

Oft ist es möglich, die Performance eines Projekts für alle Browserplattformen erheblich zu verbessern, indem die Codebasis mit dem Firebug Profiler untersucht wird. Es wird dadurch ermöglicht, einen genauen Überblick über die Dauer von verschiedenen Funktionsaufrufen zu bekommen, wie oft diese aufgerufen wurden und wie viel Prozent der Ausführungszeit sie in Anspruch genommen haben. Der erste Schritt einer Performanceoptimierung mit Firebug ist es deshalb, einfach den Profiler anzuschmeißen. Am besten genau dann, wenn Performanceprobleme zu erwarten sind. Ein gutes Beispiel dafür sind performanceintensive Drag-and-Drop-Operationen (DnD). Um diese zu optimieren, schalten wir den Profiler vor einer DnD-Operation an, indem wir auf den Konsole-Tab wechseln und dort den Button Zeitmessung anklicken. Sobald wir die DnD-Operation beendet haben, können wir das Profiling durch einen weiteren Klick auf den Button beenden und das Ergebnis untersuchen. In Abbildung 4 ist ein Beispielprofil einer Performancemessung zu sehen. In der Übersicht wird sofort klar, welche Funktionen wie viel Zeit benötigt haben, wie oft diese Aufgerufen wurden und wie viel Prozent der Gesamtzeit der Funktionsaufruf gekostet hat. Sobald wir diese Informationen haben, können wir langsame Funktionen gezielt optimieren und so die Performance einer Applikation oftmals um ein gutes Stück verbessern.

Falls wir noch gezielteres Profiling innerhalb von Funktionsaufrufen benötigen, stellt Firebug uns console.profile() und console.profileEnd() zur Verfügung. Wenn wir diese jeweils vor und nach der zu optimierenden Stelle einfügen, zeigt Firebug eine detaillierte Auswertung der Funktionsaufrufe innerhalb des untersuchten Codeblocks ähnlich wie in Abbildung 3 an.

Ein weiteres, sehr nützliches Feature der Firebug-Konsole ist die Funktion console.trace(). Diese können wir ganz einfach in unseren Sourcecode stecken. Sobald console.trace() aufgerufen wird, bekommen wir einen sehr ausführlichen Stacktrace. Dieser erlaubt es uns, die Funktionen im Callstack anzusehen und auch die Argumente, die dem Funktionsaufruf übergeben wurden, zu inspizieren. console.trace() ist vor allem dann hilfreich, wenn unbekannter Code einen Bug enthält und man sich erst einmal einen Überblick über alle Funktionsaufrufe machen will.

Abb. 4: Beispielprofil einer Performancemessung
Debugging

Sobald man sich die Grundhilfsmittel von Firebug zu Eigen gemacht hat, wird es interessant, etwas tiefer in die Ausführung des JavaScript-Codes eingreifen zu können. Dazu kommt Firebug mit einer Reihe von sehr guten Debugging-Tools, die es ermöglichen, Code zur Laufzeit zu untersuchen. Um das volle Potenzial auszuschöpfen, schauen wir uns erst einmal die so genannten Breakpoints an, eines der wichtigsten Features des Debuggers. Durch das Setzen von Breakpoints wird es uns ermöglicht, die Skriptausführung an einer bestimmten Zeile im Code zu unterbrechen und den Status der Applikation zu inspizieren. Außerdem ist es uns möglich, den „State“ durch Veränderung von Variablenwerten zu beeinflussen und so den Ablauf gezielt zu manipulieren. Das erlaubt es, bestimmte Tests durchzuführen oder zu überprüfen, wie die Applikation auf extreme Bedingungen wie invalide Variablen reagiert. Der Code in Listing 1 wird für die Debugging-Beispiele verwendet.

Listing 1: Code für die Debugging-Beispiele function executeScript(){ var inc = 0; var test = function(){ return ++inc; } for (var i=0; i inc = test(); } logValue(inc); } function logValue(val){ console.log(val); }

Um in Firebug Breakpoints zu setzen, müssen wir ganz einfach den Skript-Tab öffnen und die zu überprüfende JavaScript-Datei auswählen. Wie in anderen Debuggern setzen wir einen Breakpoint durch einen einfachen Klick vor den Zeilenzähler. Ein roter Punkt erscheint und gleichzeitig sehen wir den gesetzten Breakpoint unter dem Breakpoints-Tab („Haltepunkte“). Schauen wir uns den Debugger anhand von einem einfachen Beispiel an und setzen einen Breakpoint vor folgende Zeile.

         7	var inc = 0;
	 8	var test = function() {
	 9	  return ++inc;
	10	}
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -