Firefox-Add-Ons vorgestellt
Firebug: Firefox-Plug-In für Webentwickler
Egal ob Internet Explorer, Opera oder Safari: Mal eben in den Quellcode schauen um zu sehen, wie eine Webseite aufgebaut ist, ist mit jedem Browser möglich. Mal eben in den Quellcode schauen und auch gleich jedes beliebige Element schnell und einfach verändern und sich das Ergebnis in Echtzeit im Browser anzeigen lassen geht hingegen nur mit Firefox. Genauer gesagt: MIt dem Firefox-Plug-In Firebug.
Inhaltsverzeichnis
- 1HTML-Elemente schnell analysieren
- 2Auf jeder Webseite experimentieren
- 3JavaScript-Debugging und Plug-Ins
Firebug hat sich in den letzten Jahren für viele Webentwickler und -designer zu einem nahezu unverzichtbaren Helfer bei der Fehlersuche oder der Analyse von Webseiten entwickelt. Grund dafür sind zum einen die umfangreichen Funktionen, welche das Plug-In an Bord hat und zum anderen die Integration in einen Webbrowser - den hat man sowieso geöffnet, wenn eine Webseite getestet wird. Umso praktischer, wenn ein kleines Tool wie Firebug darin integriert ist und jede Menge Features bereit hält.
HTML-Elemente schnell analysieren
Nach der Installation kann das Plugin mit einem Klick auf ein kleines Käfer-Icon in der Statusleiste des Browsers geöffnet werden. In der Standard-Ansicht klappt sich dabei Firebug am unteren Bildschirmrand auf. Eines der beliebtesten Features von Firebug ist ein "Element-Picker": Nach Aktivierung des Pickers kann jedes beliebige Element auf einer Webseite, zum Beispiel ein Bild, eine Tabellenzeile, ein DIV-Container oder jeder andere beliebige Tag, mit der Maus identifiziert und angewählt werden. Parallel dazu wird das gewählte Element in einem kleinen Quellcodefenster innerhalb von Firebug farblich hervorgehoben. So ist es prima möglich, insbesondere komplex verschachtelte Elemente einer Internetseite zu analysieren.
Parallel zum HTML-Quellcode kann auch das zum aktuell angewählten Elemtent passende CSS angezeigt werden. So kann man auf jeder beliebigen Webseite schnell nachschauen, welcher Tricks sich die Webentwickler im Zusammenspiel von HTML und CSS bedient haben. Die Cascading Style Sheets werden parallel zum HTML-Quellcode in einem daneben platzierten Fensterbereich angezeigt. Alle dem aktuell angewählten Element zugeordneten CSS-Klassen und Stile werden sauber in einer übersichtlichen Darstellung aufgelistet. Ein Syntax-Coloring für HTML- und CSS-Code ist dabei fast selbstverständlich.
Ab der Version IE 8 ist auch ein ähnliches Debugging-Tool, von Haus aus, mit integriert. Ist zwar ganz nett aber nicht wirklich schön zum Arbeiten.
FireBug ist wahrscheinlich die beste und wichtigste Firefox-Erweiterung. Dank dieses AddOns habe ich es vor einiger Zeit gleich ganz aufgegeben, für IE zu entwickeln. Wenn man dort nämlich nicht sehen kann, was...
Zitat: Chrome, oder besser die datensichere Alternative Iron, beherrscht diese Funktionen von Haus aus - und ist noch etwas übersichtlicher. Ob es übersichtlicher ist,...
"Element schnell und einfach verändern und sich das Ergebnis in Echtzeit im Browser anzeigen lassen geht hingegen nur mit Firefox" Chrome, oder besser die datensichere Alternative Iron,...