senäh

17senäh und so…

Firefox Artikelbild

HTML/CSS/JS
10. Mrz 2012
Kommentare: 0

Firefox: der neue Inspector als Firebug-Killer?

Kategorien: HTML/CSS/JS | 10. Mrz 2012 | Kommentare: 0

Erst vor kurzem habe ich über eine interessante Firefox-Erweiterung für eine übersichtlichere Ansicht von Seitenquelltext vorgestellt. Durch Zufall bin ich vor ein paar Tagen auf den Inspector im Firefox gestoßen, der diesem seit Version 10 beiliegt. Letztenendes macht er nichts, was nicht vorher auch schon mit Firebug ging. Allerdings ist er für meinen Geschmack viel hübscher, schneller und einfach… besser.

Abrufbar ist der Inspector über Extras → Web-Entwickler → Untersuchen (Shortcut steht entsprechend dahinter).

Inspector mit HTML- und Style-Ansicht

Inspector mit HTML- und Style-Ansicht (Klicken zum Vergrößern)

Das aktuell untersuchte Element wird durch eine Abdunklung des Hintergrunds vom Rest isoliert. Am unteren Rad wird ein Brotkrümelpfad für den DOM Tree angezeigt.

Zusätzlich lassen sich – wie oben im Bild – noch die HTML- und die Style-Ansicht aktivieren. Sollte alles aus Firebug bekannt und vertraut sein. Eigenschaften können hinzugefügt, verändert und deaktiviert werden. HTML-Attribute lassen sich verändern, Texte innerhalb von Elementen allerdings leider nicht 🙁

Das ganze passiert stets ziemlich smooth und subtil animiert. Auch das Farbschema ist einheitlich gehalten. Das Arbeiten mit dem Inspector fühlt sich angenehm an.

Um es klarzustellen: der Inspector ist kein Firebug-Ersatz. Dafür fehlen Konsole und Add-Ons wie YSlow. Zum Inspizieren des DOMs und für das schnelle Ausprobieren von anderen CSS-Styles werde ich in Zukunft aber auf Firebug verzichten können.

Mehr Features mit dem Firefox 11

In Version 11 werden übrigens 2 weitere interessante Features für Entwickler hinzugefügt. Einmal der Style Editor (der vom eben vorgestellten Inspector unabhängig ist) und der native Einbau des ursprünglichen Add-Ons Tilt. Damit lässt sich das Layout einer Webseite in 3D betrachten. Eine interessante Ansicht, da das Verhältnis von Eltern- zu Kinder-Elementen recht schnell deutlich wird.

3D-Ansicht von senäh mit Tilt

3D-Ansicht von senäh mit Tilt (Klicken zum Vergrößern)

Ich finde es begrüßenswert, dass Firefox weiter an der Verbesserung seiner Entwickler-Tools arbeitet. Durch die Konkurrenz zu Chrome kommen beim Kampf um die Browser-Marktanteile brauchbare Tools zum Vorschein. Trotzdem werde ich die beiden neuen Features wohl erst mal nicht nutzen.

Im Zweifel für den Firefox

Nichtsdestotrotz bleibt Firefox – wenn auch nicht als Standardbrowser – unverzichtbar für die Webentwicklung. Bisher dank Firebug, nach und nach auch durch Eigenentwicklungen. Der Web Inspector von Chrome ist zwar nett und war schon immer besser anzuschauen als Firebug. Wahrscheinlich ist es aber einfach Gewöhnungssache.

Ich habe mich an Firebug gewöhnt. Ich meine mich aber auch an einen Kommentar erinnern zu können, der besagte, dass die Chrome Dev Tools für Webentwickler mittlerweile so fortgeschritten sind, dass das Chrome Team eine eigene JavaScript IDE auf den Markt bringen solltex.

Wie haltet ihr es mit den Entwickler-Tools? Firebug oder Web-Inspector?

Autor: Enno

Ich bin Enno. PHP ist mein Ding, aber auch alles Neue rund um die Themen HTML5, CSS3 & Co finde ich interessant. Ich mag es Leuten zu helfen und mein Wissen weiterzugeben. Sollte dir mein Beitrag gefallen haben, lass doch nen Kommentar da oder benutze einen der Social Buttons, um deinen Dank auszudrücken ;)