Mozilla stellt kostenloses Entwickler-Tool Debugger.html vor

BrowserWorkspace

Auf einer neuen Web-Architektur aufbauend hat das Mozilla-Team einen neuen Debugger vorgestellt, der nicht nur in Firefox, sondern auch in Googles Chrome verwendet werden kann.

Mit Debugger.html stellt die Mozilla-Foundation ein neues Developer-Tool für den eigenen Browser aber auch für Web-Anwendungen vor. Debugger.html ist ein vollständig neu aufgesetztes Projekt und basiert auf den React- und Redux-Web-Architekturen. Gleichzeitig führt Mozialla auch ein neues Management für das Tool ein. Das Tool wird zusammen mit Firefox ausgeliefert und kann so schnell von Entwicklern verwendet werden. Debugger.html ist ab heute in der Firefox-Nightly-Version der DevTools enthalten.

Generell stelle Mozilla sämtliche Developer-Tools die aus dem DevTool-Team kommen von der XUL-Architektur auf die wiederverwendbaren React-Komponenten und Redux-Speicher-Modelle um. Das hat den Vorteil, dass der Code in kleinere Module gepackt wird und sich so deutlich verschlanken lässt. Dadurch, so verspricht Mozilla, werde auch der Umgang mit diesen Tools deutlich einfacher und auch die Anpassung des Tools soll so beschleunigt werden.

Debugger.html ist ein neues Entwickler-Tool für Firefox, das aber aufgrund neuer Web-Technologien künftig auch mit Chrome verwendet werden kann. (Bild: Mozilla Foundation)
Debugger.html ist ein neues Entwickler-Tool für Firefox, das aber aufgrund neuer Web-Technologien künftig auch mit Chrome verwendet werden kann. (Bild: Mozilla Foundation)

Mozilla zielt mit dem neuen Tool vor allem auf den eigenen Firefox-Browser. Künftig aber soll das Tool auch für andere Browser verfügbar werden. Konkret nennt das Team das Chrome Debugging Protocol für Chrome-Tabs sowie Node-Prozesse. Auch diese Offenheit werde durch die Verwendung der neuen Architektur möglich. Allerdings seien diese Komponenten noch nicht für den produktiven Einsatz geeignet.

Ein Team bei Mozilla arbeite kontinuierlich daran, ältere Tools umzuschreiben. Bei Debugger.html jedoch hätten die Entwickler von Grund auf die neuen Web-Technologien genutzt. Auch befinde sind der Debugger noch in einer frühen Phase. Auf Github könnten Interessierte aber selbst an dem Code arbeiten und das Tool weiterentwickeln.

Der Source Panel. (Bild: Mozilla Foundation)
Das “Source”-Panel (Bild: Mozilla Foundation)

Neue Wege geht das Mozilla-Team auch bei der Nutzerschnittstelle des Tools, das jetzt in die drei Segmente Source Panel, Editor Panel und die Right Sidebar aufgeteilt ist, wie in einem Blog erklärt wird. Im Source-Teil wird ein Baum des Codes für die aktuelle Anwendung dargestellt. Im Bereich Editor werden verschiedene Dateien angezeigt. Auch Breakpoints lassen sich hier setzen. Die Right Sidebar zeigt dann die Breakpoints, den Call Stack und Scoped Variables an, wenn der Debugger pausiert.

Der Source Panel. (Bild: Mozilla Foundation)
Die Right Sidebar im Debugger.html
Anklicken um die Biografie des Autors zu lesen  Anklicken um die Biografie des Autors zu verbergen