Tag: firebug
Firebug: Cheatsheet mit Shortcuts und Befehlen
Die Referenzkarte ist zwar schon etwas älter, aber vielleicht ist sie manchem Webentwickler unbekannt gewesen: Bei Duvet-Dayz.com wurde einst ein schönes Firebug-Cheatsheet veröffentlicht, das eine gute Übersicht mit Tastaturbefehlen (Shortcuts), Maus-Aktionen und Konsolenbefehlen enthält. Die Übersicht gibt es als HTML-Version und kann dort zudem als PNG-Grafik oder PDF-Dokument heruntergeladen werden.
Das Cheatsheet ist in erster Linie für Firebug-Einsteiger gedacht — aber auch alteingesessene Firebug-Veteranen dürften den einen oder anderen Tipp finden, der womöglich noch nicht bekannt war. Hat man beispielsweise die "Element untersuchen"-Funktion aktiviert und fährt mit dem Mauszeiger über ein DOM-Element, können mit STRG + Nach oben die Elternelemente des Objekts fokussiert werden. Sollen Pixelwerte im "Styles"-Bereich geändert werden, können die Werte (Fokus muss auf dem Textfeld liegen) mit den Tasten Bild nach oben oder Bild nach unten um 10 Einheiten verändert werden.
Die Referenzkarte steckt also voller nützlicher Tricks und auch die Konsolenbefehle sind einen Blick wert.
Instant Blueprint: Grundgerüst für Web-Projekte
Vor einiger Zeit berichtete ich über das Projekt Deploy, mit dem sich per Knopfdruck fertige HTML-Grundgerüste für Web-Projekte erstellen lassen. Eine weitere Webanwendung dieser Art gibt es nun mit Instant Blueprint: Das kleine Online-Tool bietet noch mehr Möglichkeiten für die schnelle Generierung von Standard-Dateien und Ordnerstrukturen, wie sie für ein typisches Website-Projekt benötigt werden. Dazu gehören diverse HTML-, CSS- und JavaScript-Dateien.
Instant Blueprint bietet die Optionen, einen Document Type (DOCTYPE) festzulegen und ein JavaScript-Framework einzubinden. Zur Auswahl stehen derzeit jQuery, MooTools, Prototype und YUI. Weiterhin lässt sich festlegen, ob die ganze HTML-Struktur in einem zentrierten Container (div) verschachtelt werden soll. In einem Eingabefeld lassen sich die gewünschten IDs für die unterschiedlichen Bereiche (Header, Navigation, Content, etc.) festlegen. Ein Hinweis hierzu: Die fertige ZIP-Datei mit allen dazugehörigen Dateien wird erst dann generiert, wenn mindestens eine ID in das Textfeld eingetragen wurde.
In dem Kickstarter-Paket wird der CSS-Reset von Eric Meyer übrigens gleich mitgeliefert.
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.
