Praxis Webdesign: Webentwicklung mit Firebug

Firebug ist ein sehr nützliches Plugin für alle Webentwickler unter euch. Viele werden es schon kennen, für den ein oder anderen ist es vielleicht auch neu.

In der alltäglichen Webentwicklung mit HTML, CSS, Javascript ist Firebug ein sehr nützliches Tool, um notwendige Änderungen am Programm-Code schnell und effizient zu identifizieren und durchzuführen sowie bestehende Internetseiten zu analysieren. Grund genug für uns, das unter Webprogrammierern so beliebte Plugin einmal näher vorzustellen.

• Link Firefox Addon: https://addons.mozilla.org/de/firefox/addon/firebug
• Link: http://getfirebug.com/downloads

Was ist Firebug überhaupt?

Firebug wird sehr gerne genutzt, um den Quellcode von Websites oder Webanwendungen im Browser zu analysieren. Fehler können mit Firebug sehr gut ausfindig gemacht und behoben werden. Anfangs war Firebug nur in Firefox verfügbar. Mittlerweile ist Firebug dank seiner großen Beliebtheit auch für andere Browser wie Opera, Safari, Chrome und ab Internet Explorer 6 zu haben.

Für was genau kann Firebug in der Webentwicklung genutzt werden?

Wir als Webagentur nutzen Firebug sehr gerne, um bei der Erstellung von Websites mit Joomla oder WordPress das Layout richtig anzupassen, nachzuschauen ob alle Div-Container korrekt positioniert wurden oder sonstige Abweichungen entstanden sind.

Zudem können wir die Struktur einer Website durchleuchten, um Änderungen an nicht in unserer Agentur programmierten Internetprojekten vorzunehmen. Dies erspart uns ein langes Einarbeiten in den Quellcode, welches gerade bei großen Projekten viel Zeit in Anspruch nehmen kann.

Des Weiteren kann man in Firebug Echtzeit-Änderungen an der Website vornehmen und sich als Vorschau direkt im Browser anschauen. Besonders bei kleineren Detailänderungen am Webdesign, die über die CSS-Dateien erfolgen, ist dies ein sehr willkommenes Feature. Notwendige Änderungen lassen sich so schnell im Browser austesten und werden dann in die eigentlichen Quelldateien eingefügt. Gerade für Anfänger im Bereich HTML und CSS-Programmierung bietet dies natürlich auch die Möglichkeit, einfach mal ein wenig mit diversen CSS-Styles von fertigen Websites zu experimentieren und so das eigene Wissen zu erweitern.

Wie analysiere ich eine Website mit Firebug?

Um Firebug nutzen zu können, müsst ihr euch als erstes das Plugin für euren gewünschten Browser herunterladen oder direkt über ein Addon in eurem Browser installieren.

Nach der Installation, findet ihr rechts oben in der Ecke das Icon von Firebug. Um das Plugin zu aktivieren, klickt ihr einfach auf das Icon (siehe Screenshot roter Pfeil).

Darauf hin öffnet sich die Oberfläche von Firebug(sieht Screenshot blaue Umrahmung).

Auf der Oberfläche gibt es diverse Schaltflächen:

 

Wichtig ist das Icon auf das der grüne Pfeil zeigt. Wenn ihr auf dieses Icon klickt, könnt ihr jegliche Website untersuchen indem ihr einfach mit dem Mauszeiger über die Elemente auf der Website fahrt.

Die Position des Elements wird euch sofort unten in der Tool-Leiste angezeigt. Bei einem Klick auf das Element wird die Position fest ausgewählt und ihr könnt euch den zugehörigen CSS-Style zu dem Element ansehen.

In das Fenster, in dem der CSS-Style angezeigt wird, könnt ihr hinein klicken und Änderungen vornehmen, die sich direkt auf die Live-Site auswirken. Die Änderungen werden natürlich nicht auf der Website selbst gespeichert, sondern sind nur eine Vorschau – lokal auf eurem Rechner. Ihr könnt dies aber sehr gut nutzen, um Änderungen zu testen und sie dann auf euer eigenes Projekt zu übernehmen.

Über die in blauen Rahmen gesetzten Reiter könnt ihr bei HTML ,CSS und Java Skript die Dateien einsehen und editieren.  Das ist auch für die meisten Anwendungsbereiche das wichtigste.

Alternativen:

Die meisten aktuellen Browser haben schon einen integrierten Entwickler-Modus der vom Aufbau ähnlich ist wie Firebug. Um den Entwickler-Modus zu starten macht einen rechten Mausklick auf der Website die ihr untersuchen möchtet und klickt auf Element-Informationen bzw. Elemente untersuchen. Hier ein Screenshot wie es im Safari aussieht:

Fazit:

Für uns als Webagentur sind Firebug und die internen Entwickler-Modi nicht mehr wegzudenken. Sie ersparen uns im Agenturalltag sehr viel Zeit, gerade da nicht jeder Mitarbeiter immer an denselben Projekten arbeitet, die er aus dem FF kennt, sondern da kleinere Änderungen auch offen im Team verteilt werden.

Einfach praktisch in der Webentwicklung: Hierbei helfen diese Tools dabei, die Programmierung schnell und einfach zu analysieren und die gewünschten Änderungen zeitsparend umsetzen zu können, ohne dafür den Quellcode selbst durchstöbern zu müssen.

Zurück zur Übersicht