Debuggare Bun con il debugger web

Bun parla il WebKit Inspector Protocol. Per abilitare il debug quando esegui codice con Bun, usa il flag --inspect. A scopo dimostrativo, considera il seguente semplice web server.

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

Eseguiamo questo file con il flag --inspect.

Questo avvia automaticamente un server WebSocket su una porta disponibile che può essere usato per introspezionare il processo Bun in esecuzione. Vari strumenti di debugging possono connettersi a questo server per fornire un'esperienza di debug interattiva.

Bun ospita un debugger basato sul web su debug.bun.sh. È una versione modificata dell'interfaccia Web Inspector di WebKit, che risulterà familiare agli utenti di Safari.

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 ------------------

Apri l'URL debug.bun.sh fornito nel tuo browser per avviare una sessione di debug. Da questa interfaccia, potrai visualizzare il codice sorgente del file in esecuzione, impostare e visualizzare breakpoint ed eseguire codice con la console integrata.

Impostiamo un breakpoint. Naviga alla scheda Sources; dovresti vedere il codice visto prima. Clicca sul numero di riga 3 per impostare un breakpoint sulla nostra istruzione console.log(req.url).

Poi visita http://localhost:3000 nel tuo browser web. Questo invierà una richiesta HTTP al nostro web server localhost. Sembrerà che la pagina non si stia caricando. Perché? Perché il programma ha messo in pausa l'esecuzione al breakpoint che abbiamo impostato prima.

Nota come l'interfaccia è cambiata.

A questo punto possiamo fare molto per introspezionare l'ambiente di esecuzione corrente. Possiamo usare la console in basso per eseguire codice arbitrario nel contesto del programma, con pieno accesso alle variabili in scope al nostro breakpoint.

Sul lato destro del pannello Sources, possiamo vedere tutte le variabili locali attualmente in scope e approfondire per vedere le loro proprietà e metodi. Qui, stiamo ispezionando la variabile req.

Nella parte in alto a sinistra del pannello Sources, possiamo controllare l'esecuzione del programma.

Ecco un cheat sheet che spiega le funzioni dei pulsanti di controllo del flusso.

Continua esecuzione script — continua l'esecuzione del programma fino al prossimo breakpoint o eccezione.
Step over — Il programma continuerà alla prossima riga.
Step into — Se l'istruzione corrente contiene una chiamata di funzione, il debugger "entrerà" nella funzione chiamata.
Step out — Se l'istruzione corrente è una chiamata di funzione, il debugger finirà di eseguire la chiamata, poi "uscirà" dalla funzione alla posizione da cui è stata chiamata.