Firebug Archive - Open Mind

Dragonfly: Firebug für Opera

27. März 2009 von The Open Source Guy

Es gibt viele Gründe, den Firefox-Browser zu benutzen. Ein ganz wichtiger Grund ist aber mit Sicherheit die Firebug-Extension, mit der man HTML, CSS und JavaScript einer Webseite hervorragend analysieren kann. Dieses Tool hilft wie kein zweites, den Code zu verstehen und allfällige Fehler zu eliminieren.

Ein ähnliches Tool gibt es inzwischen auch für den Opera-Browser: Es heisst Dragonfly und ist ab Opera 9.5 im Lieferumfang enthalten. Dragonfly muss im Menü “Extras > Weiteres > Entwicklerwerzeuge” aktiviert werden und wird wahlweise in der unteren Hälfte des Browsers oder als separates Fenster ausgeführt.

Nun ist der Opera-Browser zwar kostenlos, aber nicht Open Source Software und hat eigentlich in diesem Blog nichts verloren. Dragonfly hingegen unterliegt der BSD-Lizenz und kann somit frei genutzt werden. Momentan befindet es sich allerdings noch im Alpha-Stadium. Interessant ist übrigens der Ansatz, dass sich Dragonfly automatisch aktualisiert, sobald eine neue Version vorliegt – Opera nennt dies vollmundig “hybrid application”.

Aardvark & Firebug: Beliebige Webseiten direkt im Firefox bearbeiten

10. Februar 2008 von The Open Source Guy

Es gibt verschiedene Situationen, in denen man eine Webseite gerne direkt im Browser anpassen würde. Beispielsweise wenn man nur einzelne Elemente der Seite ausdrucken bzw. screenshotten möchte. Oder wenn man jemandem veranschaulichen möchte, wie die Seite umgebaut werden soll. Oder um eine Seite auf die wesentlichen Elemente zu reduzieren und sie anschliessend als Template zu nutzen.

Nun ist ein Browser per Definition ein Programm, um Webseiten anzuzeigen – nicht um sie zu bearbeiten. Zwei Firefox-Extensions machen es trotzdem möglich: Aardvark und Firebug.

Aardvark ist die einfachere und schnellere Variante. Ein roter Rahmen zeigt an, welches HTML-Element sich gerade unter dem Mauszeiger befindet, und per Tastaturkürzel wird dieses Element bearbeitet. Um den DIV-Tag in unserem Beispiel zu entfernen genügt es, die Taste “R” (remove) zu drücken; mit der Taste “C” (colorize) würde er eingefärbt. Die Möglichkeiten sind beschränkt, dafür sind auch keine HTML-Kenntnisse erforderlich.

Mit Firebug, dem Universalwerkzeug für Web-Entwickler, kann man das natürlich auch. Hier editiert man den HTML-Quelltext einer Seite und sieht sofort die modifizierte Seite. Dies ermöglicht weitaus detailliertere und komplexere Eingriffe in eine Seite – sofern man weiss, was man tut. Übrigens lassen sich so auch eingebundene CSS Styles editieren. Auf diese Weise kann man sehr rasch alternative Formatierungen ausprobieren.

Performance-Optimierung mit YSlow

11. Dezember 200710. Dezember 2007 von The Open Source Guy

YSlow (ausgesprochen wie Why Slow?) ist eine Erweiterung für Firebug (eine Firefox-Extension für Web-Entwickler). Wie der Name andeutet soll das Tool bei der Analyse von Performance-Problemen helfen. So zeigt YSlow beispielsweise an, wie gross eine Seite und ihre eingebundenen Komponenten ist, wieviele HTTP-Requests sie verursacht oder welcher JavaScript-Code von überflüssigen Bytes befreit werden könnte. Für die Performance vergibt das Tool eine Note gemäss US-amerikanischem Schulsystem (Bestnote = A) und macht konkrete Vorschläge, wo Optimierungspotential besteht.

Wer eine konsequente Qualitätskontrolle seiner Websites betreibt, sollte sich YSlow sicher anschauen. Viele der angezeigten Informationen kann man sich zwar auch über das Register “Net” in Firebug, über die Extension View Dependencies oder durch einen kurzen Blick in den Code beschaffen – aber es ist schon komfortabel, auf Knopfdruck einen Report generieren zu können.

Man muss sich allerdings bewusst sein, dass es hier primär um die Optimierung der Datenübertragung vom Web-Server zum Web-Browser geht. Die dramatischen Performance-Probleme treten aber oft auf dem Server selbst auf, etwa durch ineffiziente Applikationen, Engpässe beim Zugriff auf Datenbanken oder überlastete Web-Server. Und hier hilft auch YSlow nicht weiter.