Fehlerteufel

Firebug and Friends – They Fight the Nasty Bugs
Kommentare

JavaScript galt immer als eine verspielte, unvollständige und im Hinblick auf die Entwicklungswerkzeuge schlecht unterstütze Sprache. Aber spätestens seit Joe Hewitt die erste Version von Firebug veröffentlichte, ist das anders – seitdem hat sich eine Menge getan.

Nicht nur die Entwickler rund um den Firefox haben erkannt, dass die meist verbreitete Programmiersprache am besten in ihrer natürlichen Umgebung – dem Browser – inspizierbar sein muss. Opera hat mit Dragonfly ebenfalls ein Entwicklerwerkzeug für seinen Browser zur Verfügung gestellt, der im mobilen Bereich seine Stärken voll zur Geltung bringen kann: Opera-Browser unterstützen Remote Debugging. Auch Safari bzw. WebKit kann mit eigenen Webentwicklerwerkzeugen (Abb. 1) auftrumpfen, die bei der Analyse und dem besseren Verstehen einiger interner Browserprozesse (z. B. Reflows) zur Hand gehen.

Fachbegriffe
Callstack

JavaScript kennt keine Threads. Auf dem Callstack werden alle atomar ausführbaren Einheiten (kleinste Einheit ist eine Funktion) abgelegt und nacheinander ausgeführt. Zwischen der Abarbeitung einer Einheit vom Callstack kann ein setTimeout, setInterval oder eine Garbage Collection ausgeführt werden. Daher auch der berühmte Effekt, dass nichts mehr passiert, wenn ein while(true) ausgeführt wird, denn dabei stagniert die Callstack-Abarbeitung.

Stacktrace

Zu jedem Zeitpunkt in einem Programm kann die Aufruftiefe ausgelesen werden – also welche Vorgängerfunktionen aufgerufen wurden, um zum aktuellen Punkt zu kommen. Normalerweise steht dieser so genannte Stacktrace bei Fehlern immer zur Verfügung, um den Ursprung des Fehlers herauszufinden. Meist enthält der Stacktrace auch noch die Parameter des Aufrufs.

Scope

Die Ausführungsumgebung wird Scope genannt. Das heißt globale Operationen werden im Browser auf dem Objekt window ausgeführt. Ist man dagegen innerhalb einer Funktion und referenziert Variablen mit dem Präfix this., wird nur die Umgebung der aktuellen Funktion bzw. des aktuellen Objekts referenziert. Um einen Scope in JavaScript zu erzeugen, werden ausschließlich Funktionen benutzt (diese Technik ist auch als Closure bekannt).

Abb. 1: Webentwicklerwerkzeuge des WebKits
JavaScript first

Um einige sehr nützliche Features von Firebug and friends soll es hier gehen. Exploratives Arbeiten und „einfach mal Ausprobieren“ helfen bei solchen Tools ebenso gut weiter wie in der Dokumentation zu lesen. Im Folgenden wird hauptsächlich auf die Features zum Debuggen und Inspizieren auf der JavaScript-Seite eingegangen. Firebug hat aber durchaus auch Stärken in den Bereichen HTML, DOM und CSS und ist dort ebenfalls eine unverzichtbare Hilfe.

Autocompletion ist ein Feature, das sehr schnell von der Hand geht. Wenn man die Linux-Kommandozeile kennt, dann ist man gewohnt, dass die Dateinamen des aktuellen Verzeichnisses automatisch vervollständigt werden, wenn man tab drückt. Genauso verhält es sich auch im Firebug – das „Verzeichnis“ ist hier der aktuelle Scope. Gibt man nur ein a ein und drückt dann tab – auch mehrere Male – bekommt man alle Funktionen, Variablen und Objekte aufgelistet, die mit a beginnen. In diesem Fall alert, applicationCache, atob und addEventListener. Je nachdem was noch in den globalen Namensraum geladen wurde, wird dies ebenfalls angezeigt. Wenn eine Bibliothek wie Dojo oder jQuery eingebunden wurde, taucht bei der Autocompletion für d bzw. j auch das globale Objekt dojo bzw. jQuery auf. Noch einen Schritt weiter geht der Debugger. Wenn man an einem Breakpoint anhält, kann man im Scope der aktuellen Funktion auf der Konsole arbeiten.

Wie oben erwähnt, erkennt die Autocompletion den Scope, auf den sie angewendet wird. Sehr praktisch ist es beispielsweise, wenn man wieder einmal den verflucht langen Funktionsnamen für document.getElementById eingeben muss. Nach document.get und dreimal tab ist man ebenfalls da. Und das Beste daran: Man hat sich garantiert nicht vertippt.

Wie das funktioniert? Eigentlich sehr einfach: JavaScript ist eine sehr einfache und angenehme Sprache, wenn es dazu kommt, sich einmal selbst im Spiegel zu betrachten. Im Fall von document.getElementById wäre es sehr simpel, alle Funktionen herauszufinden, die mit document.get. beginnen. Auf der Firebug-Konsole kann man sich alle Eigenschaften von document auflisten lassen (Abb. 2).

Abb. 2: Alle Eigenschaften von document

Die For-Schleife listet alle Eigenschaften des Objekts document auf der Konsole untereinander auf. Die Funktion console.log ist das Pendant zum print in anderen Programmiersprachen: Es gibt einfach alle seine Argumente auf der Konsole aus. Besonders zu beachten ist hier, dass es nicht einen nutzlosen String wie [object Object] ausgibt, sondern die Daten anschaulich darstellt und durchsuchbar macht. Da wir aber nur an den mit get beginnenden Methoden interessiert sind, würden wir das vorangehende Beispiel etwas erweitern und Folgendes schreiben: for (var key in document) if (key.indexOf(„get“)==0) console.log.(key).

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -