Tag: firebug
Arboreal: Visualisierung der DOM-Struktur
Beim Stöbern in den Firebug-Extensions bin ich kürzlich über ein interessantes Projekt gestoßen, mit dem sich die DOM-Struktur einer Seite als Stammbaum grafisch darstellen lässt. Die von Alex Spengler entwickelte Erweiterung nennt sich Arboreal und befindet sich derzeit noch im experimentellen Status. Die Installation der Extension erfordert lediglich eine manuelle Zustimmung des Benutzers.
Wenn Arboreal installiert wurde, findet sich in Firebug im rechten Panel (HTML-Tab) der Punkt "Visualization". Die grafische Hierarchie einer Website wird in diesem Bereich dargestellt — die Elemente des Stammbaus können durch die linke Maustaste verschoben werden. Wird in der Ansicht ein DOM-Element ausgewählt, synchronisiert sich die Auswahl mit dem Seiteninspektor auf der linken Seite, der die gewohnte Ansicht repräsentiert.
Die Erweiterung bietet viele Einstellungsmöglichkeiten und so kann die Darstellung der DOM-Elemente durch etliche Optionen angepasst werden. Tooltips über den Objekten blenden zusätzliche Details wie etwa Attribute oder Text ein. Zudem kann die gesamte Struktur als GraphViz-Datei ausgegeben werden.
Man darf auf die finale Version der Erweiterung gespannt sein, da sie eine alternative Methode zur Auswahl von DOM-Objekten darstellt und zudem die Komplexität einer Website übersichtlich veranschaulicht.
Firebug: CSS-Anpassungen in Echtzeit erstellen
Der Titel dieses Beitrags könnte etwas irreführend sein: Hier geht es nicht um die Möglichkeit, über das "Styles"-Panel von Firebug neue Stile zu definieren. Inzwischen dürfte diese Funktionalität jedem Webentwickler bekannt sein. Falls nicht, kann sie in diesem Artikel nachgelesen werden.
In diesem kurzen Beitrag möchte ich eine Vorgehensweise beschreiben, mit der sich sehr schnell ganze CSS-Dateien in Firebug anlegen lassen. Der Vorteil dieser Methode besteht darin, dass die neuen Stile und Anpassungen in Echtzeit betrachtet und verändert werden können. Dadurch entfällt der ständige Wechsel zwischen Code-Editor und Firefox. Da diese Möglichkeit vielleicht nicht jedem CSS-Entwickler bekannt ist, will ich sie kurz vorstellen.
Wer schon mit Firebug gearbeitet hat, wird den Reiter "CSS" kennen — darüber können per Doppelklick neue Eigenschaften angelegt und bestehende Stile bearbeitet werden. Mit den Pfeiltasten (das entsprechende Feld muss aktiviert sein) können Zahlenwerte schrittweise erhöht oder verringert werden.
Diese ganzen Möglichkeiten stehen natürlich auch in dem "Styles"-Panel zur Verfügung, das eine kompakte Version des "CSS"-Tabs darstellt und die geteilte Hauptansicht der Firefox-Erweiterung bildet.
Weiterlesen...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.