Mozilla stellt kostenloses Entwickler-Tool Debugger.html vor
Auf einer neuen Web-Architektur aufbauend hat das Mozilla-Team einen 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.
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.
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.
