Opera veröffentlicht Final seiner Werkzeugsammlung „Dragonfly“

Mit Network Inspector und Storage Inspector können Website-Entwickler die Performance und den Ressourcenverbrauch ihrer Site prüfen. Außerdem gibt es Debugging-Tools für JavaScript sowie einen Inspector für DOM und CSS.

von Björn Greif am 5. Mai 2011 , 15:33 Uhr

Dragonfly liegt ab sofort in der finalen Version 1.0 vor (Bild: Opera).

Opera hat die finale Version seiner Entwicklertool-Sammlung Dragonfly 1.0 freigegeben. Sie enthält einen Javascript-Debugger und Visualisierungswerkzeuge für das Document Object Model (DOM), das Netzwerk sowie den Speicher. Zusammen sollen diese Tools die Entwicklung und das Debugging von Webseiten und -anwendungen erleichtern.

Dragonfly ist in Operas gleichnamigen Browser integriert und lädt automatisch aus dem Internet, wenn der Anwender eine Webseite aufruft. Dadurch ist die Anwendung immer auf dem neuesten Stand und muss nicht gesondert aktualisiert werden.

Der „Network Inspector“ identifiziert Latenzen, zeigt zwischengespeicherte Ressourcen und Statistiken zu Downloads der Elemente sowie ihrer Reihenfolge an. Hier lassen sich auch alle Elemente auf einen Blick oder detaillierte Einzelstatistiken etwa für Bilder, Schriften, Skripte oder HTML-Dateien anzeigen.

„Storage Inspector“ dagegen befasst sich mit dem Umgang mit Daten. Hier kann man Cookies testen oder die Leistung von HTML-5-Webspeicher prüfen. Der „Resource Inspector“ listet alle von einer Website oder Anwendung genutzten Systemressourcen auf.

Änderungen an Schrift und anderen Seitenelementen zeigt Dragonfly in Echtzeit an. Außerdem ermöglicht es Remote Debugging, also das Testen einer Site auf einem anderen PC, einem mobilen Endgerät oder einem Fernseher mit kompatiblem Browser. Hinzu kommen Designhilfen wie eine Farbauswahl und -palette.

Die Suite unterstützt alle auf Presto basierenden Opera-Produkte, darunter auch Opera Mobile und Opera Widgets. In Opera 9.50 ist sie über das Menü für Entwicklerwerkzeuge verfügbar, unter Opera ab 10.50 kann nach einem Rechtsklick die Option „Element untersuchen“ ausgewählt werden. Eine ausführliche Dokumentation findet sich auf der Dragonfly-Website. Dort gibt es auch eine Übersicht über alle zentralen Funktionen.