In den letzten Monaten hat Mozilla den Browser Firefox um viele Werkzeuge für Webentwickler erweitert. Das Problem: Diese nehmen schnell fast den kompletten Bildschirm ein, Platz für das Wesentliche, nämlich die Webseite, bleibt kaum. Mozilla spricht dabei auch vom DevTools Donut. Abhilfe soll die DevTools Toolbox schaffen.

Während es vor einem Jahr nicht viel mehr als die Webkonsole gab, gibt es in Firefox mittlerweile einen JavaScript-Debugger, einen Stil-Inspektor, eine DOM-Ansicht, einen Responsive Design-Modus, eine Kommandozeile und noch mehr. Das natürliche Problem zeigt das folgende Bild.

Bildquelle: paulrouget.com

Aus diesem Grund wird sich das Layout der Entwickler-Werkzeuge in Zukunft ändern, Mozilla spricht hier von der DevTools Toolbox. Die Idee dahinter ist es, alle Werkzeuge in einer einzigen Box zu vereinen, welche über Tabs gewechselt werden können. Dabei kann die Toolbox entweder am unteren Bildschirmrand oder rechts als Sidebar angedockt werden. Oder man holt sich die Toolbox in ein eigenes Fenster. Besonders praktisch kann dies bei der Arbeit mit zwei Monitoren sein, da man so sowohl die Webseite als auch die Werkzeuge jeweils im Vollbild nutzen kann.

Ebenfalls wird Mozilla in diesem Zusammenhang ein neues DevTools API einführen. Über dieses Interface werden die Entwicklerwerkzeuge registriert und können innerhalb der Toolbox leben. Auch Erweiterungen können das Interface nutzen und die Toolbox um eigene Werkzeuge erweitern. Inspiriert wurde man bei der Entwicklung des APIs von Firebug, mit deren Team man auch zusammengearbeitet hat.

Ein Blick hierauf zeigt übrigens, dass für jedes Werkzeug ein about:config-Schalter zum Deaktivieren vorgeschrieben ist. In der Konsequenz bedeutet das, dass der Benutzer selber festlegen kann, welche Werkzeuge er in der DevTools Toolbox sehen und welche er ausblenden möchte. Genauso lassen sich über das API Buttons für Kommandozeilen-Befehle registrieren.

Ein erster Prototyp der DevTools Toolbox wurde nun fertiggestellt. Im Folgenden sind zunächst ein paar Bilder und dann ein Video zu sehen, welches das Ganze in Aktion zeigt. Das Design ist natürlich noch nicht final, auch wenn mir persönlich das optisch sogar schon ziemlich gut so gefällt.

Bilderquelle: paulrouget.com