12 Reaktionen

Firefox 20: Webentwickler-Toolbox vereint Entwickler-Werkzeuge

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 Entwickler-Werkzeuge-Donut. Abhilfe soll die Webentwickler-Toolbox schaffen, welche nun in Firefox 20 gelandet ist.

Anfang Oktober wurde auf dieser Seite bereits über die neue Toolbox für Webentwickler geschrieben. Die Idee hinter dieser Toolbox 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.

Besagte Toolbox wurde nun in den Firefox 20 Nightly-Builds erstmals implementiert. Es sind noch nicht alle Funktionalitäten vorhanden, so ist ein Andocken als Sidebar bislang nicht möglich; und auch das Design entspricht noch nicht der finalen Optik. Aber es gibt einem bereits ein sehr gutes Gefühl dafür, wie Mozilla sich die Entwickler-Werkzeuge in Firefox vorstellt. Im Folgenden gibt es einen Rundgang durch Mozillas Entwickler-Werkzeuge.

Die Toolbox kann entweder über das Webentwickler-Menü oder über einen Button in der Entwickler-Toolbar (Shift + F2) aufgerufen werden. Ganz links befinden sich zwei Buttons zum Schließen der Toolbox sowie zum Lösen der Toolbox in ein eigenes Fenster. Daneben folgen verschiedene Tabs, in welchen die verschiedenen Entwickler-Werkzeuge beheimatet sind. Weitere zum jeweiligen Werkzeug gehörenden Buttons befinden sich in einer Leiste unterhalb der Tableiste. Der erste Tab beinhaltet die Webkonsole von Firefox, der JavaScript-Debugger befindet sich im zweiten Tab.

DevTools Toolbox: Webkonsole

DevTools Toolbox: Debugger

Der Untersuchen-Tab an dritter Stelle erinnert vom Aufbau her an die bekannte Firebug-Erweiterung mit einem großen Markup-Bereich sowie einer schmalen Sidebar, welche wiederum drei Tabs beinhaltet, nämlich eine Regeln-Ansicht, eine Berechnet-Ansicht sowie das Box-Modell von CSS.

DevTools Toolbox: CSS Regeln

DevTools Toolbox: CSS Berechnet

DevTools Toolbox: CSS Box-Modell

Der letzte Tab beherbergt schließlich den Stil-Editor zum Bearbeiten von CSS-Dateien.

DevTools Toolbox: Stil-Editor

Wie bereits angedeutet kann über einen Button ganz links Firefox dazu veranlasst werden, die Toolbox vom unteren Festerrand zu lösen, so dass diese als frei bewegbares und in der Größe flexibles Fenster bereitstehen. Arbeitet man mit einem zweiten Monitor ist dies besonders praktisch, da man die Toolbox dann in den Vollbild-Modus schalten und die Webseite auf dem anderen Bildschirm im Ganzen sehen kann. Schließlich befinden sich rechts noch jeweils ein Button für das JavaScript-Scratchpad, den Responsive Design Modus sowie die 3D-Ansicht einer Webseite.

DevTools Toolbox: Vollbild Debugger

DevTools Toolbox: Fenster

DevTools Toolbox: 3D-Ansicht

Soweit zum aktuellen Stand. Abschließen möchte ich den Artikel mit einem Entwurf, wie das Ganze einmal aussehen könnte, wenn es fertig ist.

Entwickler-Toolbox Australis Mockup
Bildquelle: people.mozilla.com/~shorlander

Unabhängige Berichterstattung unterstützen.

Unterstütze wirklich unabhängige und Fakten-basierte Berichterstattung zu Mozilla, welche nicht das Ziel hat, Schlagzeilen zu produzieren, sondern objektiv zu informieren.

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, firefoxosdevices.org sowie sozone.de.

8 Kommentare - bis jetzt!

Eigenen Kommentar verfassen
  1. nik22
    schrieb am :

    Ganz dumme Frage: Wieso sieht „www.soeren-hentzschel.at“ auf den Screenshots anders aus, als bei mir?

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

    Das ist die sich derzeit noch in Entwicklung befindliche kommende Version dieser Webseite. Die sieht niemand außer mir. 😉

  3. nik22
    schrieb am :

    Ich dachte schon . . .
    Chic, muss ich sagen!
    Sandstone?

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

    Ne, kein Sandstone, das wäre mir zu nah an mozilla.de dran und würde zu sehr den Eindruck einer offiziellen Mozilla-Seite erwecken. Hier siehst du ein bisschen mehr:
    http://www.youtube.com/watch?v=32Z76L3xpBc

  5. schrieb am :

    hallo.hab farge seit firefox 17 und firefox 18.01 ist zurzeit nicht kompatibel mit kaspersky internet security 2012.an was liegt das?

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

    Hallo,

    das liegt daran, dass AV-Hersteller wie Kaspersky absolut unfähig sind, ihre Browser-Erweiterungen rechtzeitig anzupassen, was für ein Sicherheits-Unternehmen ziemlich beschämend ist. Ich empfehle, diese dauerhaft deaktiviert zu lassen oder gar zu deinstallieren, weil sie keinen ernsthaften Mehrwert für die Sicherheit bieten und alle sechs Wochen wieder nicht rechtzeitig kompatibel sind.

  7. Petra
    schrieb am :

    Ich möchte gern Dein Tool „Web-Entwickler“ deinstallieren. Ich bin ein Laie und kann damit nichts anfangen. Bitte um Info. Vielen Dank im Voraus.

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

    Es gibt von mir kein Tool mit diesem Namen. Alles, was du in diesem Menü findest, gehört zum Standard-Umfang von Firefox.

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