Insektenflug

Seit 2003 können Webentwickler die Hilfe von Chris Pedericks Web Developer Toolbar [a] in Anspruch nehmen und außerdem seit mehreren Jahren beim Debugging auf die Firefox-Erweiterung Firebug [b] bauen. Für Googles Chrome gibt es außer der genannten Toolbar eigene Entwicklertools, und seit dem Internet Explorer 8 hat Microsoft seinen Browser ebenfalls um ein solches Werkzeug erweitert. Die Opera-Mannschaft war ihrerseits nicht untätig und hat Anfang Mai, nach gut drei Jahren Arbeit, Dragonfly [c] in der Version 1.0 veröffentlicht.

Vergleichsmaßstab ist das seit Jahren eingeführte und häufig verwendete Firefox-Add-on Firebug. Im Gegensatz zu ihm müssen Entwickler das Debugging-Tool von Opera nicht ausdrücklich installieren. Genau wie die Werkzeuge in Chrome und im Internet Explorer ist Dragonfly von Anfang an im Browser integriert. Es aktualisiert sich selber im Hintergrund, sodass man stets über die neueste Version verfügt.

Ähnliche Funktionen wie Firebug

Dragonfly lässt sich auf drei unterschiedlichen Wegen starten. Zum einen kann man auf den zu untersuchenden Abschnitt einer Website rechts klicken und im Kontextmenü den Punkt „Element untersuchen“ aufrufen oder über die Menüpunkte „Ansicht -> Entwicklerwerkzeuge -> Dragonfly“ starten. Die dritte Variante ist die Tastenkombination Strg+Shift+I auf Windows- und Linux-Rechnern oder Apfeltaste+Alt+I auf dem Mac.

Wer schon mit Firebug gearbeitet hat, dürfte sich in Dragonfly schnell zurechtfinden. Ähnliche Funktionen stehen zur Verfügung, und die Anordnung der Elemente ist vergleichbar. Wie Firebug kann man Dragonfly in einem separaten Browserfenster laufen lassen (der zweite, kleine Button von rechts), und der HTML-Viewer zeigt den „Ist-Zustand“ des Quelltextes an.

Dragonfly verfügt über sieben Funktionsbereiche, die über die jeweiligen Icons erreichbar sind, wie Abbildung 1 sie als Menü in der Bildmitte zeigt. Im Einzelnen sind dies: Dokumente, Skripte, Netzwerk, Ressourcen, Storage, Fehler und Werkzeuge. Dazu nun etwas detaillierter.

HTML und CSS inspizieren und bearbeiten

Im ersten Bereich (siehe Abbildung 1) kann man den Quelltext der Website inspizieren. Links unten sieht man den HTML-Code, rechts die CSS-Regeln sowie die DOM- und Layouteigenschaften (Box-Modell) des ausgewählten Elements; oberhalb davon wird dasselbe Element im Frontend optisch hervorgehoben.

Kontextmenüs im linken Bereich erlauben, die Attribute umzubenennen, zu löschen, neue hinzuzufügen oder das Markup (HTML) zu bearbeiten. Letzteres ist in Dragonfly besser gelöst als in Firebug. Wenn man dort den Quelltext bearbeiten möchte, blendet das Werkzeug nur das entsprechende Element im „neuen“ Fenster ein und den Rest des Quelltextes aus. Bei Dragonfly bleibt dagegen alles im selben Fenster und nur das zu verändernde Element ändert sein Aussehen. Das ist übersichtlicher und unkomplizierter. Nach demselben Prinzip können Webdesigner im rechten Bereich das CSS manipulieren. Die Änderungen im HTML und CSS wirken sich im Frontend als Live-Vorschau sofort aus. Einer schnellen und effektiven Fehlersuche von HTML-Dokumenten steht somit nichts im Wege.

Der zweite Menüpunkt ist für das Debugging von JavaScript-Code zuständig. Steuert man ihn an, kann man in der Auswahlliste das in der aktiven Website eingebundene Skript aussuchen und anschließend den Code begutachten sowie Variablen inspizieren. Im Gegensatz zu Firebug verfügt Dragonfly über eine Syntaxhervorhebung für JavaScript. Bei einem Klick auf die Escape-Taste erscheint im unteren Bereich die Konsole. Es handelt sich um ein Kommandozeilen-Tool, mit dem man schnell beispielsweise JavaScript-Anweisungen untersuchen kann.

Wenn Komponenten bremsen

Mit dem Menüpunkt „Netzwerk“ visualisiert man den Aufbau der Website beziehungsweise die einzelnen HTTP-Aufrufe. Damit kann man gut erkennen, welche Komponenten den Aufbau der Website ausbremsen. Leider sind in diesem Bereich die Informationen nicht so übersichtlich angeordnet, wie man es von Firebug kennt. Informationen über die Anfragen- und Antwort-Zeiten der einzelnen Komponenten bekommt man nur als Mouseover-Text zu lesen und weitere Informationen, wie die Dateigröße, nur über den Umweg des Menüpunkts „Ressourcen“. Ein Mitschreiben per Log ist nicht vorgesehen.

Unter diesen „Ressourcen“ finden sich die einzelnen Komponenten (Grafiken, Skripte, CSS-Dateien et cetera) der Website. Dabei gibt Dragonfly Protokoll, Host, Pfad, Mime-Typ und die Dateigröße aus, falls eruierbar. Um alle Informationen zu erhalten, muss man sie über das Kontextmenü für die Ansicht aktivieren.

Wer wissen will, welche Cookies eine Website schickt, ist im „Storage“-Bereich richtig. Man kann die Cookies bearbeiten oder neue hinzufügen. Beim Löschen kann man wählen, ob alle oder nur solche der zu untersuchenden Domain zu löschen sind. Hier erscheinen allerdings nicht nur Cookies, sondern sämtliche auf dem Client gespeicherte Seiteninformationen – inklusive HTML5 Web Storage, einer Technik, die es den Webanwendungen ermöglicht, Daten lokal zu speichern [f].

Ein Klick auf „Fehler“ gibt eine Liste der JavaScript- und CSS-Bugs aus. Dabei berücksichtigt Dragonfly auch extern eingebundene Inhalte, beispielsweise iframe-Elemente von Facebook oder Flattr. Hinzu kommt, dass das Tool die CSS3-Vendorpräfixe (wie -moz-border-radius) hier ebenfalls aufführt. Daher sollte ziemlich jede moderne Website eine stattliche Anzahl an Fehlern vorweisen können.

Screenshots, Farbpicker und Farbpalette

Besonders nützlich ist der Menüpunkt „Werkzeuge“, der bei der Konkurrenz so nicht vorhanden ist. Hier kann man von der aktuellen Seite einen Screenshot erstellen und von dieser Abbildung die Farbwerte rauspicken und in einer Palette ablegen. Dabei wird die ausgewählte Farbe in drei verschiedenen Werten angegeben: in hexadezimalen und in dezimalen RGB-Werten [g] sowie als HSL [h]. Leider kann man die Farbpalette nicht speichern, sie ist daher beim nächsten Browserstart nicht mehr vorhanden.

Mit Remote Debug (siehe den zugehörigen Teil der Dokumentation, [e]), verfügt Dragonfly über ein Werkzeug, das es einem ermöglicht, die Website auf einer externen Opera-Instanz zu testen. So könnte man Dragonfly auf dem Desktop-Rechner per IP-Adressbekanntgabe mit Opera auf dem Smartphone verbinden und vom Desktop aus die Website im mobilen Browser testen. Die beiden Instanzen müssen sich innerhalb desselben Netzes befinden.

Fazit

Insgesamt macht Dragonfly einen positiven Eindruck. An einigen Stellen ist Firebug zwar leichter zu bedienen, und er liefert etwa beim Netzwerk mehr Informationen. Aber Firebug ist erheblich länger auf dem Markt und hat dadurch naturgemäß einen Vorsprung. Auf der anderen Seite kann Dragonfly mit einfacherem Bearbeiten von HTML und der Option, eine Farbpalette anzulegen, punkten. Und mit Remote Debug hebt sich Dragonfly ebenfalls von der Konkurrenz ab. Selbst wenn man als Webworker Opera nur als Testbrowser nutzt, so kann man für Dragonfly dennoch dankbar sein, weil man damit auf diesem Browser ein mehr als ordentliches Debugging-Tool zur Verfügung hat. (hb)

Vladimir Simovic

ist geschäftsführender Gesellschafter der perun.net webwork GmbH, Autor mehrerer Fachbücher (WordPress, CSS) und diverser Fachartikel.

Alle Links: www.ix.de/ix1107072