Firebug: Der Firefox-Klassiker hat ausgedient

Lange Zeit war Webseitenentwicklung in Mozilla Firefox nur mit Firebug und anderen Addons möglich. Deshalb wechselten viele Webdesigner zu Google Chrome. Die Webentwickler-Tools waren out of the box dabei und zugleich deutlich ausgereifter. Seit ungefähr Firefox 20 hat sich vieles geändert. Mozilla folgt endlich den anderen Browser-Entwicklern. Seitdem werden die eigenen Tools immer besser. Also habe ich mein betagtes Firebug über den Jordan geworfen — zu meinem Vorteil. Firefox startet nun schneller und stürzt seltener ab. Die Firefox-Macher haben viel Zeit und Mühe investiert, um eine vernünftige Entwicklungsumgebung auf die Beine zu stellen. Obendrein mit kleinen Extras, welche von der Konkurrenz wohl eher nicht zu erwarten sind. Überzeugen diese im Praxisalltag?

Alles für den Webdesigner: Konsole, Inspektor, Debugger …

Die Entwickler-Tools umfassen eine Reihe an kleineren Programm-Inhalten. Angefangen mit der Konsole, die mittlerweile in nahezu jedem Browser irgendwo vorhanden ist. Der Webseiten-Insepktor besticht durch eine gelungene Mischung aus Übersichtlichkeit und Funktionalität. Auf den ersten Blick erkennt jeder, wo er sich im aktuellen Dokument gerade befindet. Zwar enthält auch Chrome dieses Feature, aber es wirkt eher unscheinbar. Viel interessanter ist der Tooltip, der am ausgewählten Objekt erscheint. Darüber können Elemente schnell identifiziert oder um Pseudoklassen erweitert werden. Zusätzlich kann ein Wechsel zu einem neuen Baustein fix erfolgen. Neben dem HTML-Quellcode stehen die dazugehörigen CSS-Selektoren. Es existieren Tabs für die CSS-Regeln, berechnete Werte, enthaltene Schriftarten (teilweise auf Google Webfonts verlinkt) und die Darstellung im Box-Modell — Übersicht pur!

Webseiten-Inspektor in Firefox Debugger in Firefox
Webseiten-Inspektor und Debugger in Firefox verwenden

Aus früheren Firefox-Versionen kennen sicherlich noch einige die 3D-Betrachtung der Webseiten. Mag eine nette Spielerei sein, aber eine durchaus praktikable. Im Gegensatz zu Chrome kann eine Homepage in Firefox kinderleicht responsive getestet werden. Der Debugger gestattet wie gehabt die Überprüfung von JavaScript-Code. Eine Live-Bearbeitung scheint allerdings momentan nicht machbar. Die Stilbearbeitung ermöglicht die Veränderung von CSS-Sourcecode. Sogar unter dem Gesichtspunkt, neue Stylesheets zu integrieren. Die Laufzeit- und Netzwerkanalysen helfen euch dabei, einen guten Überblick über die Performance der Webseite zu gewinnen. So entlaft ihr sehr flink unliebsame Zeitfresser. In den Einstellungen der Webentwickler-Tools konnte ich noch zwei interessante Einstellungen finden. Einmal die Möglichkeit via Chrome-Debugger zu prüfen und andererseits genauso externe Debugger zu verwenden.

Stilbearbeitung in Firefox Laufzeitanalyse in Firefox
Netzweranalyse in Firefox Einstellungen der Firefox Entwickler-Tools
Stilbearbeitung, Optionen, Laufzeit- & Netzweranalyse

Alles in allem, kann ich Mozilla wirklich ein verdientes Lob aussprechen. Die Webentwickler-Tools können locker mit denen von Chrome und anderen Browsern mithalten. Verstecken brauchen sie sich keinesfalls. Firebug gehört bei mir der Vergangenheit an. Wie gefallen euch die Webentwickler-Tools von Mozilla Firefox? Schreibt mir eure Meinung in die Kommentare.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.