Home > Allgemeines, Open Source, Web 2.0 > Schweizer Messer für Webentwickler : firebug

Schweizer Messer für Webentwickler : firebug

Nachdem ich vor einiger Zeit einem gestandenen Webentwickler über die Schulter geschaut habe und mit Erstaunen feststellen musste, dass er den Feinschliff seines Designs noch mühsam vollkommen manuell im “Try and Error”-Verfahren durchgeführt hat, habe ich mich entschlossen nun diesen Artikel über meine Design-Optimierungstools zu schreiben. Möglicherweise gehts anderen altgedienten Webentwicklern ja ähnlich ;-) und alle Nicht-Techniker, die sich lieber nicht mit html und css abplagen möchten, bekommen einen Einblick in diese Arbeit…

Meine “Schweizer Messer” sind die Add-Ons “Firebug” und “Web Developer” für den freien Browser Firefox.

Diese möchte ich im Folgenden anhand einiger Screenshots erläutern.

Firebug

Das wichtigste Tool ist “Firebug”, das man wie alle anderen Firefox-Erweiterungen von der Firefox-Addon-Website oder auch von der Firebug-Homepage mit einem Klick laden und installieren kann.

Es würde endlos werden, alle Optionen und Möglichkeiten dieses hervorragenden Tools zu erklären. Ich beschränke mich daher hier auf die -zumindestens von mir- am häufigsten genutzte Funktionalität : Untersuchung der Elemente einer Website und direkte probeweise Änderungen im Browser (genauer im DOM = Document Object Model) um die richtigen Pixelwerte und Attribute schnell und komfortabel zu ermitteln. Das Ergebnis wird dann ins html bzw meist css übernommen.

Nach der Installation habe ich einen neuen ganz wichtigen Menüeintrag im Menü, das ich mit der rechten Mouse-Taste bekomme : “Element untersuchen”

Firebug Menü

Firebug Menü

Einfach mit dem Cursor auf das zu untersuchende Element auf der Webseite, rechte Maustaste und “Element untersuchen” auswählen.

Dadurch bekommt man am unteren Rand des Browserfensters ein Firebug-Fenster eingeblendet, das den html-Code an dieser Stelle und die hier aktiven Styles aus dem css-File (Stylesheet) zeigt :

Firebug-Fenster

Firebug-Fenster

Isn’t that handy ;-) ?

Und das beste daran ist nun, dass man sowohl im css-Teil rechts, wie auch im html links ändern und die Auswirkungen dieser Änderungen vollkommen gefahrlos ausprobieren kann. F5 (Reload) und alles ist wie zuvor ….

Sieht dann so aus :

Änderungen

Änderungen

Durch Auswahl eines Wertes (hier Schriftgröße) wird diese änderbar und man kann z.B. mit den Cursortasten den Wert verändern und sofort die Auswirkung auf die Webseite oberhalb sehen …

Also ich finde das ziemlich cool :-)

Ich hoffe ich konnte durch diese kurze Einführung Lust auf mehr wecken und zeigen, wie hilfreich diese Erweiterung ist.

Nun noch kurz zu “Web Developer”

Diese Erweiterung dient als flankierendes Instrument zu Firefox.

Installation wie üblich von der Firefox-AddOn-Seite oder der Homepage des Entwicklers.

Nach der Installation hat man eine zusätzliche Toolbar mit vielen hilfreichen Funktionen:

Web Developer

Web Developer

Die vielen Menüs und Funktionen sind eigentlich für jeden mit etwas Ahnung von html selbsterklärend. Kurz als Eindruck :

Eindruck Web Developer

Eindruck Web Developer

Hier habe ich mir temporär die Werte (auch versteckte) des Anmeldeformulars links anzeigen lassen und lasse mir auch alle Tabellenzellen markieren.

Das soll als Eindruck genügen.

Interessierte sollten sich die Erweiterungen einfach mal installieren und damit experimentieren. Keine Angst das ist gefahrlos und die Add-Ons sind auch genauso schnell wieder entfernt.

Und nun noch eine schlechte Nachricht für Nutzer des Internet Explorers von Microsoft : Es gibt zwar auch dafür eine Webentwickler-Erweiterung, aber diese ist bei weitem nicht so mächtig und brauchbar wie Firebug und Web Developer.