4 Reaktionen

Firefox Entwickler-Werkzeuge: DevTools Toolbox

Geschätzte Lesedauer:

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.

DevTools Donut
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.

DevTools Toolbox

DevTools Toolbox

DevTools Toolbox
Bilderquelle: paulrouget.com

Dieser Artikel wurde von Sören Hentzschel verfasst.

Sören Hentzschel ist Webentwickler aus Salzburg. Auf soeren-hentzschel.at informiert er umfassend über Neuigkeiten zu Mozilla. Außerdem ist er Betreiber von camp-firefox.de, der ersten Anlaufstelle im deutschsprachigen Raum für Firefox-Probleme aller Art. Weitere Projekte sind firefox.agenedia.com, mozilla.de, firefoxosdevices.org sowie sozone.de.

3 Kommentare - bis jetzt!

Eigenen Kommentar verfassen
  1. Steffen
    schrieb am :

    War diese Toolbox im Stile des Firebugs nicht schon von Anfang an so geplant. Zumindest habe ich vor längerem Skizzen/Screenshots geshen wo ich schon dachte. Wow ein Firebug Klon

  2. Sören Hentzschel Verfasser des Artikels
    schrieb am :

    Das war nicht von Anfang an so geplant, sonst hätte man es von Anfang an so gemacht. 😉 Skizzen könntest du hier auf dem Blog in der Artikel-Serie „Neues aus der Mozilla Design-Schmiede“ gesehen haben, dort habe ich vor nicht so langer Zeit etwas veröffentlicht. 😛

  3. Steffen
    schrieb am :

    Richtig Sören, da kann ich lange im Mozilla Wiki nach der Skizze suchen 🙂

Und jetzt du! Deine Meinung?

Erforderliche Felder sind mit einem Asterisk (*) gekennzeichnet. Die E-Mail-Adresse wird nicht veröffentlicht.
  1. Nach Absenden des Kommentar-Formulars erfolgt eine Verarbeitung der von Ihnen eingegebenen personenbezogenen Daten durch den datenschutzrechtlich Verantwortlichen zum Zweck der Bearbeitung Ihrer Anfrage auf Grundlage Ihrer durch das Absenden des Formulars erteilten Einwilligung.
    Weitere Informationen