WordPress & Webwork - perun.net

Bei Firepicker handelt es sich um ein Firefox-Addon, welcher die Funktionalität von Firebug um einen Farbdialog erweitert:

So hat man die Möglichkeit einfach und schnell neue Farben und verschiedene Transparenzwerte zu testen → Stichwort RGBA.

CSS Usage ist ein Addon für Mozilla Firefox, welche den Firebug um eine zusätzliche Funktion erweitert. Mit CSS Usage kann man herausfinden welche CSS-Regeln auf einer bestimmten Seite eingesetzt werden.

Nach der Installation bindet sich CSS Usage in Firebug als zusätzlicher Tab ein. Mit Klick auf Scan untersucht man die gerade aufgerufene Seite. Aktiviert man AutoScan dann kann man mehrere Unterseiten der gleichen Website aufrufen und die Erweiterung berücksichtigt dies.

CSS Usage listet alle eingebundenen CSS-Dateien komplett auf. Dabei werden eingesetzte Regeln mit hellgrüner Farbe ausgegeben. Regeln, die auf einer anderen Unterseite eingesetzt wurden sind dunkelgrün und rot sind die Regeln, die gar nicht zum Einsatz kommen.

Vor ein paar Tagen wurde die Version 1.9 von Firebug veröffentlicht. Bei Firebug handelt es sich um ein sehr wichtiges Werkzeug für Webworker, mit dem man sehr schnell eine Website untersuchen und auf Fehler überprüfen kann. Das Werkzeug habe ich bereits an zwei Stellen erwähnt bzw. beschrieben: hier und hier.

In der neuen Version sind ein paar Funktionen hinzugekommen, wovon ich zwei für mich persönlich als wichtig erachte. Zum einen bekommt man, wenn man in der HTML- bzw. CSS-Ansicht mit dem Cursor über ein Schrift fährt, einen Tooltip eingeblendet, in dem man einen Blindtext mit der jeweiligen Schrift zu sehen ist:

Die andere Funktion ist die Möglichkeit eine einzelne HTTP-Anfrage im Netzwerk-Bereich gezielt neu zu senden. Einfach auf die entsprechende Anfrage rechts-klicken und im Kontextmenü Erneut senden auswählen.

Weitere Berichte zu Firebug 1.9:

• Hacks.Mozilla.org
• Golem.de

Wer aktuell noch nichts fürs Wochenende vor hat, der könnte sich die Auflistung der Webwork-Tools auf hacks.mozilla.org mal genauer anschauen:

Es werden 51 Erweiterungen für Firefox und 13 Erweiterungen für den Firebug aufgelistet. Ein paar davon sind auf meine Testliste gewandert, unter anderem Screenshot Pimp und friendly bug.

Zum Thema Performance-Optimierung von Websites habe ich hier auf perun.net schon einige Artikel verfasst. Dabei habe ich auch Tools wie z. B. YSlow erwähnt, die einem hilfreich zu Seite stehen.

Ein sehr wichtiges (und imho auch wenig beachtetes) Tool mit dem Namen "Netzwerk" befindet sich mittlerweile in allen modernen Browsern. Bei Mozilla Firefox muss man es mit Firebug nachrüsten, aber bei Opera, Google Chrome und Internet Explorer gehört es zum Lieferumfang der Entwicklerwerkzeuge. Somit hätte ich schon den ersten Vorteil dieser Funktion genannt.

Wenn man sich begibt die Performance einer Website zu verbessern, dann gehört, wenn nicht der erste, dann zumindest der zweite oder dritte Blick in die Netzwerk-Funktion.

Vor allem hier sieht man sehr detailliert und genau welche Komponente(n) den Aufbau einer Website ausbremsen. Somit ergänzt sich diese Information sehr gut mit den Infos, die man zum Beispiel durch YSlow oder Page Speed gewinnt und man kann sich so ein viel besseres Bild machen und dadurch einfacher entscheiden ob und welche Maßnahmen unternommen werden sollen.

Übrigens: wenn man die Cache-Plugins für WordPress testet, dann sollte man sich aus der jeweiligen Installationen auch ausloggen. Zumindest bei Hyper Cache werden die Seiten für Admin nicht aus dem Cache gezogen.

Die etwas erfahreneren Webworkern, die auch Mozilla Firefox einsetzen kennen Firebug bereits schon. Solltest du diese Firefox-Erweiterung nicht kennen, dann schaue dir u. a. folgenden Artikel an: Firebug: dem Webworker seine liebste Feuerwanze.

In meinen Augen ist Firebug ein unverzichtbares Werkzeug, wenn man als Webworker schnell und nervenschonend seine Arbeit erledigen möchte.

Für Firebug selber – obwohl selbst eine Erweiterung – gibt es schon mehr als 55 Erweiterungen. Eine davon ist CodeBurner von SitePoint. SitePoint habe ich zuletzt im Artikel HTML und CSS: Dokus und Referenzen erwähnt.

CodeBurner integriert sich sehr gut in Firebug und zwar nicht nur Layout-technisch sondern auch funktional: (weiterlesen…)

Firebug ist neben der Web Developer Toolbar ohne Zweifel die wichtigste Erweiterung für Mozilla Firefox. Für Firebug selbst gibt es allerdings auch Erweiterungen, wovon ich eine (YSlow) im Artikel "WordPress-Websites beschleunigen" kurz erwähnt habe.

Mit PixelPerfect gibt es eine weitere interessante Erweiterung für Firebug, die vor allem dann interessant sein sollte wenn pixelgenaues Arbeiten gefragt ist.

PixelPerfect im Einsatz

Die Bedienung der Erweiterung ist recht einfach. Man lädt temporär eine Grafik Hoch bzw. bindet sie in die Erweiterung ein. Dann kann man der Grafik einen Opacity-Wert ("Durchsichtigkeit") vergeben und Sie dann mittels den Zahlenwerten oder durch verschieben mit der Maus über der Website positionieren.