Blogbeitrag
26 | 022010
Add-ons für Firefox – Firebug
Geschrieben von Stefan um 21:29 Uhr
Wer sich mit der Erstellung von Webseiten beschäftigt, der kommt um ein Add-on nicht herum. Firebug!
Ich habe dieses Add-on sehr zu schätzen gelernt, weil es einen vom Rand des Wahnsinns zurück in die heile Welt bringt.
Nichts ist schlimmer, als eine Webseite, die von falschen Farben oder Proportionen so verunstaltet ist, dass man sie sich eigentlich gar nicht anschauen mag. Und gerade wenn man wie ich eine Plattform wie WordPress nutzt, ein professionelles Theme einsetzt, welches von den Funktionen wirklich der Wahnsinn ist, aber noch nicht so richtig in die interne Struktur vorgedrungen ist, kann einem Firebug das Leben sehr erleichtern. Gerade WordPress, dieses Theme und die installierten Plugins für WordPress bringen insgesamt 35 CSS-Dateien mit. Jede CSS-Datei hat im Schnitt mindestens 300 Codezeilen, die Theme-Dateien haben leicht das Dreifache an Inhalt.
In diesem Wust auf Anhieb die richtige Stelle zu finden, um z.B. den Seitenabstand einer Textbox zu ändern oder die Textgröße eines bestimmten Widgets in der Sidebar gleicht schon der Suche nach der bekannten Nadel im Heuhaufen.
Hier kommt Firebug ins Spiel. Firebug nistet sich nach der Installation und dem obligatorischen Neustart von Firefox in der Statusleiste des Browsers ein und kann mit einem Klick auf das Symbol gestartet werden. Firebug bietet eine Reihe von sehr nützlichen Funktionen zur Webseitenentwicklung. Das Add-on ermöglicht es unter anderem JavaScript, HTML und CSS von Webseiten auf Fehler zu kontrollieren.
Das Markieren von Inhalten auf der Webseite zeigt in der rechten Hälfte des Firebug die zuständige CSS-Klasse an.
Auch die Abstände einzelner Elemente lassen sich einfach lokalisieren.
Es ist aber nicht nur möglich, die HTML-Struktur bzw. CSS-Eigenschaften anzeigen zu lassen, man kann auch den Code direkt über Firebug ändern und testen, welchen Einfluss diese Änderungen haben.
Mit Klick auf das Symbol kann man den Wert rechts daneben freigeben und einen anderen Wert eingeben, der dann direkt angezeigt wird.
Wenn man den Wert nun eingibt, werden die Änderungen sofort angezeigt. So kann man die Einstellungen testen, bevor man die Dateien ändert.
Durch den Klick auf das Verbotszeichen vor einer Formatierung kann diese deaktiviert werden. Die Änderungen werden dann sofort im Browser sichtbar. Zur Erleichterung wird zusätzlich der Name der CSS-Datei sowie die Zeile angezeigt. Damit weiß man gleich den Ort, an dem man die endgültigen Änderungen durchführen muss, wenn man den Code erfolgreich getestet hat.
Weiter ist eine Suche enthalten, mit der man bei Aktivierung mit dem Mauszeiger über die gesuchten Stellen auf der Webseite fährt und diese dann in Firebug angezeigt bekommt. So kann man beliebige Stellen schnell und einfach lokalisieren.
Fazit
Firebug ist eines der besten Plugins für den Firefox. Gerade für Webdesigner und solche die es werden wollen ist dieses Plugin sehr zu empfehlen.
Den Download findet man auf der offiziellen Add-on Webseite von Firefox.
Ein ausführliches Tutorial über Firebug findet man auf dem Blog von Michael Sync. Hier wird nochmals ausführlich auf die einzelnen Möglichkeiten eingegangen.
Beitragsdetails
Kategorie » Firefox «
Der Autor
Kommentare: 5
Info
Bevor Du einen Kommentar schreibst, solltest Du wissen, dass mein Blog "nofollow-free" ist, d.h. Du bekommst hier von mir einen echten Backlink auf Deine Seite.
Dafür nehme ich mir das Recht heraus, alle Links aus Deinem Kommentar zu entfernen, die alleine der Werbung dienen oder nur Pagerank abgreifen.
1
Michael Erich 23.09.2010 um 08:48 Uhr
Hi Stefan,
habe jetzt brav auch “Fireburg” eingebunden und sehe inzwischen ein, dass das sehr von Vorteil ist und eine echte Hilfe…
Das mit den “Gravataren” habe ich inzwischen auch hinbekommen dank “Fireburg”…
Du hast da allerdings irgendwie noch einen “Avatarcache” zusätzlich eingebunden und skalierst wieder auf 40px x 40px runter… Hat das einen besondereren Grund und was ist das für ein “Cache”…?
Gruß Michael Erich
2
Stefan 23.09.2010 um 10:08 Uhr
Na siehste, manchmal lohnt sich so etwas auch.
Ich habe hier keinen Avatarcache eingebaut, die Skalierung kommt über die CSS-Änderungen. Wenn Du diese nicht machst, dann passt der Avatar nicht richtig in den Rahmen hinein und sieht sch… aus.
Aber Du hast Recht, die Skalierung sollte ich noch rausnehmen, ich glaube die erzeugte Größe kommt über die functions.php.
EDIT:
Schon erledigt, nun wird das Bild nicht mehr skaliert, sondern gleich in der richtigen Größe ausgegeben. Suche in der functions.php des Templates (bei mir Zeile 231) “echo get_avatar”, dort hast Du irgendwo stehen “size = ’40′”. Da kannst Du die Größe anpassen auf “50″.
3
Michael Erich 23.09.2010 um 15:18 Uhr
Hi,
ja habe ich gerade in der funktions.php auch geändert… Was ich aber eigentlich meinte war das Deine style.css zusätzlich diese beiden Anweisungen enthält, die Original nicht drin sind:
ol.commentlist li .avatarcache{width:40px;height:40px;float:left;}
.avatarcache img{width:40px;height:40px;float:left;}
?????
Gruß Michael Erich
4
Stefan 23.09.2010 um 17:46 Uhr
Leere mal bitte Deinen Browsercache oder drücke mal F5. Das ist von einem früheren Versuch, die Gravatars lokal zwischenzuspeichern.
Das hab ich aber ewig schon nicht mehr drin in meinem Blog…
5
Michael Erich 24.09.2010 um 16:30 Uhr
Hi,
ah ja, habe ich auch gerade bemerkt… War wohl noch im Speicher…!
Gruß Michael