Opera Dragonfly: Das bietet das alternative Tool-Set für Webentwickler

Viele, die früher Opera als Browser nutzten, haben gewechselt, als dieser gebührenpflichtig wurde. Diese Strategie wurde aber rasch wieder aufgegeben. Der kostenlose Opera-Browser ist mittlerweile bei seiner Version 11.51 angelangt und ist für Windows, Mac und Linux sowie für Mobil- und Tablet-Plattformen verfügbar.

Opera – ja bitte

Trotz seines geringen Anteils am Browsermarkt ist Opera doch ein ressourcenschonender Browser mit einer schicken Benutzeroberfläche. Neben dem Entwickler-Toolset bietet er Hardware-Beschleunigung, übereinander liegende Reiter und Steuerung per Mausbewegung. Er funktioniert auch sehr gut auf Mobilplattformen und nutzt die schnellste JavaScript-Engine namens Carakan.

Was will man mehr?

Opera Dragonfly wird mit dem Browser installiert und kann über das Dropdown-Menü Tools | Advanced oder einen Tastatur-Shortcut aufgerufen werden (bei Windows über [Ctrl][Shift][I]). Man kann auch in einer Webseite mit der rechten Maustaste auf ein Element klicken und dann im Popup-Menü die Option Inspect Element wählen.

Das Opera Dragonfly-Toolset kann über das Dropdown-Menü Opera Tools aufgerufen werden.

Bei einem Blick auf die Features von Opera Dragonfly hat man sofort den Eindruck, dass ein Webentwickler hier einfach alles findet, um Webanwendungen sorgfältig entwickeln, testen und debuggen zu können. Die folgende Liste führt einige dieser Features auf, die sich über die Hauptwerkzeugleiste in der Opera Dragonfly-Schnittstelle aufrufen lassen.

Die Hauptwerkzeugleiste von Opera Dragonfly bietet Zugang zu den wichtigsten Features.

• DOM Inspector: Dieses Feature kann über die Option Documents in der Werkzeugleiste aufgerufen werden. DOM Inspector zeigt den DOM-Baum für das aktuelle Dokument an, wie vom Opera-Browser interpretiert. Die Opera-Website beschreibt dieses Feature treffenderweise als Luxusausgabe von View Source. Das Style Inspector-Feature der Option, das im Fenster unten rechts zu sehen ist, zeigt den entsprechenden Stil für ein im linken Fenster ausgewähltes Element (DOM Inspector).
• JavaScript Debugger: Der umfassende Debugger ist über die Option Scripts aufrufbar. Er bietet Zugang zu JavaScript für die aktuelle Webseite und ermöglicht eine Flow-Kontrolle über Breakpoints et cetera. Der Quellcode wird im linken Teil des Fensters angezeigt; auf der rechten Seite befinden sich Features wie Breakpoints, Status (Watches, Call Stack und andere) und der Code lässt sich problemlos durchsuchen.
• Network Inspector: Die Option Network öffnet das Feature, das ein HTTP-Dashboard darstellt. Mit Network Inspector lassen sich alle zu einer Seite gehörenden HTTP-Anfragen anzeigen und prüfen und die Downloadzeiten/-dauer für alle von der Seite verwendeten Ressourcen darstellen; all dies kann man über den Reiter Network Log anschauen. Ein nettes Extra ist die Möglichkeit, eigene HTTP-Anfragen über den Reiter Make Request zu schicken.
• Resources Inspector: Die Option Resources führt zu diesem Feature. Resources Inspector zeigt alle von der Webseite initiierten Ressourcenanfragen an. Es zeigt den Host der jeweiligen Ressource sowie den vollständigen URI mit Typ und Größe an. Dies kann man zusammen mit Network Inspector nutzen, um große Ressourcen und die mit ihnen verbundenen Downloadzeiten zu sehen, so dass sich Probleme lokalisieren lassen.
• Storage Inspector: Dieses Feature liefert einen Überblick über den von der Seite genutzten clientseitigen Speicher. Dazu gehören auch Cookies und HTML5-Webspeicher.
• Error Log: Über die Option Errors gelangt man zu Error Log, einem wichtigen Feature für die Arbeit mit eigenen Webanwendungen. Im Header dieser Option ist die Gesamtanzahl der ausgegebenen Fehler angegeben. Dabei wird der Fehler mit seiner Quelle angezeigt. Error Log lässt sich über die Einstellungen so konfigurieren, dass bestimmte CSS-Fehler nicht angezeigt werden, und die Filter-Box zur Anpassung der Fehlerliste genutzt werden kann.
• Console: Über Console lassen sich rasch JavaScript-Anweisungen bewerten und Objekte und Eigenschaften prüfen.
• Remote Debugging: Mit diesem nützlichen Feature kann man separate Instanzen von Opera auf dem gleichen oder einem anderen Computer, Mobilgeräten oder einem Fernseher debuggen. Remote Debugging sucht dabei nach Verbindungen zu bestimmten IP-Adressen und Ports und sendet dann Debugging-Daten über diese Verbindung. Es führt genau wie eine lokale Instanz ein Debugging per Fernzugriff durch.

Der für die Startseite von TechRepublic geöffnete DOM Inspector.

Dies spiegelt lediglich einen ersten Eindruck des in Opera Dragonfly enthaltenen Toolsets wieder. Jedes Feature umfasst seine eigene Funktionalität. Opera Dragonfly besteht komplett aus Open Source Code und es steht eine umfangreiche Dokumentation zu den Tools online zur Verfügung.

Features im Überfluss

Opera Dragonfly scheint alle erforderlichen Tools für das korrekte Debuggen und Interagieren mit Webanwendungen mitzubringen. Es folgt dem von Firebug eingeschlagenen Weg und bietet sogar nicht mehr Features, weshalb Opera Dragonfly mittlerweile von vielen Entwicklern bevorzugt wird.