Aktualisierte Version des JavaScript-Debuggers erschienen

Neues Firefox-DevTool: debugger.html
Kommentare

Bereits seit Anfang des Jahres arbeitet das Firefox-DevTool-Team daran, den Debugger innerhalb der Developer Tools zu ersetzen. Der neue Debugger soll zudem auch automatisch verschiedene Ziele und Funktionen debuggen können. Mit debugger.html ist jetzt die aktualisierte Version des JavaScript-Debuggers für das Web erschienen.

Die Firefox-DevTools wechseln derzeit von XUL zu einer moderneren Architektur, die aus wiederverwendbaren React-Komponenten und einem Redux-Speicher-Modell besteht. Mit diesem Ansatz wird Code in kleinere Module verschlankt. Eines der ersten überarbeiteten Tools ist debugger.html, dessen Ziel eine deutlich verbesserte und insgesamt vertrautere Umgebung für Web-Entwickler ist.

Zwar gibt es derzeit noch keine produktionsreife Version, aber in Zukunft soll der Debugger zusammen mit dem Chrome Debugging Protocol für Chrome-Tabs und Node-Prozesse verwendet werden können.

API Summit 2017

Moderne Web APIs mit Node.js – volle Power im Backend

mit Manuel Rauber (Thinktecture), Sven Kölpin (Open Knowledge)

API First mit Swagger & Co.

mit Thilo Frotscher (Freiberufler)

debugger.html

Bei debugger.html handelt es sich um einen Open-Source-JavaScript-Debugger, der als komplett neues Projekt aufgesetzt wurde und auf GitHub bereitsteht. Er basiert auf einer React- und Redux-Web-Architektur und wird direkt mit Firefox ausgeliefert. Momentan kann sich der Debugger mit Firefox verbinden und diesen debuggen, eine experimentelle Verbindung mit Chrome und Node ist ebenfalls möglich. Dazu nutzt debugger.html Mozillas Remote Debug Protocl (RDP) und kommuniziert mit Chrome und Node über Chromes RDP.

Das User Interface des Debuggers ist in drei Hauptkategorien unterteilt: das Sources-Panel, das Editor-Panel und die rechte Seitenleiste. Das Sources-Panel zeigt eine Baumansicht aller aktuellen Quellen für die momentan auf Fehler überprüfte Applikation. Im Editor-Panel werden verschiedene Quelldateien des Projekts angezeigt; zudem bietet es Funktionen zum Setzen von Breakpoints und zum Verschönern der Quelle. Die rechte Seitenleiste visualisiert die momentane Anzahl der Breakpoints, den aktuellen Call Stack und alle scoped Variablen, sofern der Debugger pausiert ist.

user interface debugger.html

Das User Interface von debugger.html, Quelle: Mozilla

Der Debugger wird in die Developer Tools für Firefox integriert; zu Testzwecken steht debugger.html ab sofort in den Nightly-Builds zur Verfügung. Eine Anleitung zur Verwendung des neuen Tools findet sich im Beitrag im Mozilla-Developer-Blog. Einen Überblick zum React-Rally-Projekt, zu dem debugger.html gehört, bietet folgendes Video mit James Long, leitender Entwickler für Debugger (ab 2:22:15 Std.):

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -