Tag: firebug
Firebug: FireQuery, Eventbug und weitere Extensions
Firebug zählt heutzutage zum Standard-Repertoire eines Webentwicklers. Der Feuerkäfer ist so beliebt, dass es mittlerweile eine große Sammlung an Erweiterungen für die Erweiterung gibt. Viele dieser Extensions sind wahrscheinlich altbekannt, dennoch wird es zukünftig noch weitere interessante Zusatzfunktionen für das Entwickler-Tool geben.
Für das Debuggen von jQuery-Code gibt es seit geraumer Zeit die Erweiterung FireQuery, mit der sich jQuery-Ausdrücke und Events im Firebug-Fenster anzeigen lassen.
Eine weitere Funktionalität der Extension stellt die Option "jQuerify" dar: Damit lässt sich auf einer Website (online oder offline) dynamisch die jQuery-Bibliothek einbetten, so dass anschließend per "$jq()" jQuery-Befehle ausgeführt werden können.
So lassen sich schneller jQuery-Funktionen testen und entwickeln. Ein schöner Nebeneffekt dabei ist, dass nach einem Funktionsaufruf alle Elemente in der Konsole angezeigt werden, die von dem jQuery-Befehl betroffen waren (siehe Abbildung).
Allerdings ist bei der Verwendung der Erweiterung Vorsicht geboten: Der Autor weißt darauf hin, dass die Extension noch unsicher ist und deshalb in einem separaten Profil genutzt werden sollte.
Firebug: Tipps für das Editieren von CSS-Styles
Die Firefox-Erweiterung Firebug hat sich zum Standard für das Testen und Debuggen von Websites entwickelt. Zusammen mit verschiedenen Erweiterungen lässt sich mit Firebug jeder technische Aspekt einer Website analysieren und optimieren.
Da das mächtige Werkzeug für Webentwickler sehr umfangreich ist, sind nicht alle Funktionen auf Anhieb ersichtlich bzw. selbstverständlich. Dieser Artikel soll eine kleine Anleitung für das Bearbeiten von CSS-Styles in Firebug darstellen — die Funktion dürfte das beliebteste Feature der Extension sein, da sich damit sehr schnell sichtbare Korrekturen an einem HTML-Dokument vornehmen lassen. In diesem ersten Firebug-Tutorial zeige ich lediglich ein paar Funktionen, welche die Arbeit mit dem Werkzeug erleichtern sollen. Firebug ist sehr benutzerfreundlich und viele Vorgänge lassen sich durch Ausprobieren herausfinden.
Nach dem man Firebug mit der F12-Taste geöffnet hat (Voraussetzung ist ein fertig geladenes HTML-Dokument), wird die zweispaltige Ansicht (HTML und CSS) dargestellt. In diesem Artikel geht es ausschließlich um den rechten Bereich, der "Styles"-Komponente.
Google Page Speed: Performance-Tool für Firebug
Google hat eine neue Erweiterung für Firebug veröffentlicht, die der Performance-Analyse von Websites dient. Google Page Speed ist wie YSlow ein reines Messwerkzeug, welches unterschiedliche Kriterien einer Seite analysiert und entsprechende Optimierungen vorschlägt. So kann beispielsweise ermittelt werden, ob Dateien mit einer Caching-Information versehen sind oder ob JavaScript- und CSS-Dateien komprimiert werden können. Auch ungenutzte CSS-Selektoren schlüsselt Google Page Speed auf.
Die 1,6 MB große Firefox-Extension ist der Yahoo-Erweiterung YSlow sehr ähnlich — auch die "Best Practices" von Google ähneln dem gleichnamigen Dokument von Yahoo sehr. Beide Anbieter haben dennoch großartige Arbeit bei der Entwicklung ihrer Erweiterungen und Dokumentationen geleistet, so dass sich die Werkzeuge sehr gut zur Optimierung der Ladezeiten eignen.
Allerdings sollte man nicht alle Verbesserungsvorschläge der Extensions zu genau nehmen. In vielen Fällen sind es Kleinigkeiten, bei denen es um Datenmengen von wenigen Kilobytes geht. Bei größeren Seiten lohnt sich der Aufwand bestimmt.
Firefinder für Firebug: Schnell CSS-Elemente finden
Mit Firefinder gibt es neben YSlow und CodeBurner eine weitere Extension für Firebug: Die neue Erweiterung bietet die Möglichkeit, CSS-Elemente einer geöffneten Seite per Texteingabe zu durchsuchen. Nachdem man den Namen des CSS-Selektors eingegeben hat, werden alle gefundenen Einträge aufgelistet und gezählt. Gleichzeitig werden die Elemente auf der Website farbig umrandet.
In der Liste der gefundenen CSS-Bausteine kann der Benutzer zudem den Inhalt des jeweiligen Seitenelements anzeigen — dabei wird lediglich der reine Textinhalt (inklusive Links) ausgegeben.
Die Erweiterung kann durchaus hilfreich sein, wenn man aufwendige CSS-Strukturen durchforsten muss und schnell die entsprechenden Elemente benötigt.
Firefox: Entwicklerwerkzeuge
Inzwischen dürfte nahezu jeder Webentwickler seine Seiten mit den großartigen Extensions von Firefox analysieren und korrigieren. Natürlich muss der fertige Code in der Regel weiterhin auf andere Browser optimiert werden, jedoch bieten die Entwicklerwerkzeuge neben der Analyse von HTML-Code auch exzellente Möglichkeiten, JavaScript-Fehler aufzuspüren und die Ladezeiten der Seite zu beschleunigen. Das direkte Arbeiten an der Seite im Browser erleichtert den Test- bzw. Korrekturprozess ungemein.
Neben reinen Quellcode-Werkzeugen gibt es auch eine Reihe von kleinen Helfern, die beispielsweise das exakte Vermessen Anpassen von Pixeln im Browser erlauben. Schließlich lassen sich auch RGB-Werte über einen Farbwähler ermitteln, was ebenfalls eine Erleichterung beim Bearbeiten von CSS-Code darstellt.
Ich habe eine kleine Liste der Extensions erstellt, die ich momentan zum Entwickeln von Websites benutze. Die Liste ist nun auch als Sammlung bei Mozilla verfügbar.
