Firefox 10 erscheint am 31. Januar (am selben Tag, an dem Firefox 11 eine offizielle Betaversion wird) und vervollständigt schließlich die wachsende Sammlung von Entwicklertools des Browsers mit Seiten- und Stilinspektoren.
In mancher Hinsicht ähneln diese Tools Firebug, sind aber auch einzigartig Mozilla-ähnlich.
Anstatt zu versuchen, Firebug oder die WebKit-Entwicklertools zu reproduzieren, hat Mozilla nur die wesentlichsten Funktionen integriert und sich stattdessen darauf konzentriert, das Erlebnis elegant zu gestalten.
Funktioniert der neue Ansatz oder werden die Designer schreiend zu Firebug zurücklaufen? Lass uns einen Blick darauf werfen.
Sie können den Seiteninspektor aufrufen, indem Sie mit der rechten Maustaste auf eine Webseite klicken und „Inspizieren“ wählen. (Firebug hat seinen Kontextmenüpunkt kürzlich in „Inspizieren in Firebug“ geändert, sodass es problemlos mit den integrierten Entwicklungstools koexistieren kann.) Am unteren Bildschirmrand erscheint eine violette Leiste mit einer Liste der übergeordneten Elemente und Elemente des ausgewählten Elements Kinder.
Sie können auf Eltern oder Kinder klicken, um sie auszuwählen, und Sie können mit der rechten Maustaste auf ein Element klicken, um seine Geschwister anzuzeigen. Es gibt auch Schaltflächen mit den Bezeichnungen „Inspizieren“, „HTML“ und „Stil“. Wenn Firebugs Meer aus Tabs und Knöpfen Sie in den Wahnsinn getrieben hat, wird dieses Layout ein Geschenk des Himmels sein. Wenn Sie nur das DOM sehen möchten, kann es Sie verwirren, zuerst auf „HTML“ klicken zu müssen.
Eingraben
Wenn Sie auf die Schaltfläche „HTML“ klicken, wird ein Bereich angezeigt, in dem die Hierarchie der HTML-Tags angezeigt wird, aus denen Ihre Seite besteht. In dieser Ansicht können Sie Tags erweitern und reduzieren sowie deren Attribute bearbeiten. Wenn Sie auf die Schaltfläche „Inspizieren“ klicken, können Sie mit der Maus über Elemente fahren, um sie zu überprüfen. Dabei hebt Firefox das Element hervor, das Sie überprüfen, und verdunkelt den Rest der Seite.
Wenn Sie auf die Schaltfläche „Stil“ klicken, wird der Stilinspektor geöffnet, der die CSS-Regeln anzeigt, die für das ausgewählte Element gelten. Im Style Inspector können Sie von „Regeln“ zu einem Abschnitt „Eigenschaften“ wechseln, der Ihnen die berechneten CSS-Eigenschaften für das ausgewählte Element sowie Links zur Mozilla-Dokumentation für jede Eigenschaft bietet.
Der Stilinspektor befindet sich rechts auf der Seite, während sich der Seiteninspektor und der HTML-Bereich am unteren Bildschirmrand befinden. Sie können wählen, ob beide Bereiche, nur einer oder keiner von beiden angezeigt werden soll.
Das deckt im Grunde die gesamte Arbeit der Seiten- und Stilinspektoren ab. Die Webkonsole und das JavaScript-Scratchpad, die in früheren Versionen von Firefox eingeführt wurden, sind separate Tools. Es gibt keinen Netzwerkaktivitätsmonitor. Es gibt keinen Benutzeragenten-Umschalter, keine Funktion zum Bearbeiten als HTML, keine Tools zum Testen der Leistung, keine Möglichkeit, neue Tags in eine Seite einzufügen, keine Möglichkeit, den Hover-Status eines Elements zu aktivieren. Es gibt nicht einmal ein „Layout“-Panel zum Anzeigen der Abmessungen, der Abstände und Ränder Ihres Elements.
Trotz all dieser Einschränkungen greife ich immer wieder auf die Seiten- und Stilinspektoren zurück. Ich komme wegen der übersichtlichen Benutzeroberfläche, der sorgfältig platzierten Scheiben und dem ausgefallenen lila Chrom zurück. Ich komme zurück, weil es mir Spaß macht, sie zu benutzen, und weil sie meine Bedürfnisse in den meisten Fällen erfüllen.
Die einfache Benutzeroberfläche der Inspektoren bedeutet auch, dass sie auch dann nützlich sind, wenn ich das Fenster klein gemacht habe, um responsive Designs zu testen. Wenn sie meinen Anforderungen nicht genügen, öffne ich einfach Firebug oder die Web Developer Toolbar. (Ich würde das viel seltener tun, wenn die integrierten Entwicklungstools Äquivalente zu den Layout- und Net-Panels von Firebug hätten.)
Die Entwicklungstools von Mozilla müssen nicht mit dem Funktionsumfang der Tools ihrer Konkurrenten übereinstimmen, da die speziellen Funktionen dieser Tools bereits als Firefox-Erweiterungen vorhanden sind. Das macht die Entwicklungstools von Firefox einzigartig.
Diese Browser reichen bis 11
Zusätzlich zum HTML- und Style-Inspektor sind einige innovative Funktionen für spätere Versionen von Firefox geplant. Mit den Entwicklertools von Firefox 11 können Sie Ihre Webseite als dreidimensionale Stapel von Tags anzeigen. Jedes Mal, wenn Sie ein Tag verschachteln, wird dieser Stapel von Tags größer. Diese Funktion ist tatsächlich überraschend hilfreich – Sie können auf einen Blick erkennen, ob sich ein Element im falschen übergeordneten Element befindet, und die Anhäufung dieser Tags wird neue Entwickler schnell von Div-itis befreien.
Ebenfalls in Firefox 11 erwartet wird ein Stil-Editor. Mit diesem Tool können Sie neue Stylesheets erstellen, ähnlich wie es jeder gute Texteditor tun würde. Der Hauptunterschied besteht darin, dass Ihre Änderungen auf Live-Webseiten angewendet werden, sobald Sie mit der Eingabe fertig sind.
Bisher war diese Art der Live-CSS-Bearbeitung die Domäne von Entwicklungsumgebungen wie EspressoDaher ist es großartig zu sehen, dass diese Funktion direkt in den Browser integriert ist. Weitere Funktionen, darunter „Tools zur Unterstützung bei Anwendungsleistungsproblemen“, sind verfügbar geplant für später in diesem Jahr.
Selbst in Firefox 11 ähnelt der Vergleich der integrierten Entwicklungstools mit Firebug (oder den WebKit-Entwicklungstools) jedoch ein wenig dem Vergleich von iOS mit Android. Ersteres verfügt über eine übersichtliche, intuitive Benutzeroberfläche und einige innovative Ideen, verfügt jedoch nur über wenige Power-User-Funktionen.
Letzteres verfügt über alle erdenklichen Funktionen und kann entsprechend konfiguriert werden, aber es ist nicht ganz so elegant wie das Wunderkind aus Cupertino. Im Gegensatz zu iOS und Android ist es bei Bedarf einfach, beide Tools gleichzeitig zu verwenden. Mozilla macht weiter Beitrag zu Firebug und hat deutlich gemacht, dass Firebug auf lange Sicht da ist.
Welches Werkzeug ist das richtige für Sie? Das hängt davon ab, welche Funktionen Sie benötigen, auf welche Funktionen Sie verzichten können und wie Sie sich auf die Suche nach Erweiterungen machen, um die Lücken im Tool Ihrer Wahl zu schließen. Was auch immer Sie über die neuen Entwicklertools denken, dies ist ein Bereich, in dem Sie Firefox nicht vorwerfen können, WebKit nachzuahmen.
Sind Sie von den neuen Entwicklungstools in Firefox 10 begeistert? Was sind Ihre bevorzugten Entwicklungstools? Lass es uns in den Kommentaren wissen!
