Debuggen von Bun mit dem Web-Debugger

Bun spricht das WebKit Inspector Protocol. Um das Debuggen beim Ausführen von Code mit Bun zu aktivieren, verwenden Sie das --inspect-Flag. Zu Demonstrationszwecken betrachten Sie den folgenden einfachen Webserver.

Bun.serve({
  fetch(req) {
    console.log(req.url);
    return new Response("Hello, world!");
  },
});

Lassen Sie uns diese Datei mit dem --inspect-Flag ausführen.

Dies startet automatisch einen WebSocket-Server an einem verfügbaren Port, der verwendet werden kann, um den laufenden Bun-Prozess zu introspektieren. Verschiedene Debugging-Tools können sich mit diesem Server verbinden, um eine interaktive Debugging-Erfahrung zu bieten.

Bun hostet einen webbasierten Debugger unter debug.bun.sh. Es ist eine modifizierte Version von WebKits Web Inspector Interface, das Safari-Nutzern bekannt vorkommen wird.

bun --inspect server.ts

txt

------------------ Bun Inspector ------------------
Listening at:
  ws://localhost:6499/0tqxs9exrgrm

Inspect in browser:
  https://debug.bun.sh/#localhost:6499/0tqxs9exrgrm
------------------ Bun Inspector ------------------

Öffnen Sie die bereitgestellte debug.bun.sh-URL in Ihrem Browser, um eine Debugging-Sitzung zu starten. Von dieser Oberfläche aus können Sie den Quellcode der laufenden Datei anzeigen, Haltepunkte setzen und anzeigen und Code mit der eingebauten Konsole ausführen.

Lassen Sie uns einen Haltepunkt setzen. Navigieren Sie zum Tab Sources; Sie sollten den Code von früher sehen. Klicken Sie auf die Zeilennummer 3, um einen Haltepunkt bei unserer console.log(req.url)-Anweisung zu setzen.

Besuchen Sie dann http://localhost:3000 in Ihrem Webbrowser. Dies sendet eine HTTP-Anfrage an unseren localhost-Webserver. Es scheint, als würde die Seite nicht laden. Warum? Weil das Programm die Ausführung am zuvor gesetzten Haltepunkt angehalten hat.

Beachten Sie, wie sich die Benutzeroberfläche geändert hat.

An diesem Punkt können wir viel tun, um die aktuelle Ausführungsumgebung zu introspektieren. Wir können die Konsole unten verwenden, um beliebigen Code im Kontext des Programms auszuführen, mit vollem Zugriff auf die Variablen im Geltungsbereich an unserem Haltepunkt.

Auf der rechten Seite des Sources-Bereichs können wir alle lokalen Variablen sehen, die derzeit im Geltungsbereich sind, und nach unten navigieren, um ihre Eigenschaften und Methoden zu sehen. Hier inspizieren wir die req-Variable.

In der oberen linken Ecke des Sources-Bereichs können wir die Ausführung des Programms steuern.

Hier ist eine Spickzettel, der die Funktionen der Kontrollfluss-Schaltflächen erklärt.

Continue script execution — Setzen Sie die Programmausführung fort bis zum nächsten Haltepunkt oder Ausnahme.
Step over — Das Programm fährt mit der nächsten Zeile fort.
Step into — Wenn die aktuelle Anweisung einen Funktionsaufruf enthält, "springt" der Debugger in die aufgerufene Funktion.
Step out — Wenn die aktuelle Anweisung ein Funktionsaufruf ist, beendet der Debugger die Ausführung des Aufrufs und "springt aus" der Funktion an die Stelle, von der aus sie aufgerufen wurde.