Depurar Bun con el depurador web

Bun habla el Protocolo Inspector de WebKit. Para habilitar la depuración al ejecutar código con Bun, usa la bandera --inspect. Para fines de demostración, considera el siguiente servidor web simple.

Bun.serve({
  fetch(req) {
    console.log(req.url);
    return new Response("¡Hola, mundo!");
  },
});

Ejecutemos este archivo con la bandera --inspect.

Esto automáticamente inicia un servidor WebSocket en un puerto disponible que se puede usar para introspeccionar el proceso de Bun en ejecución. Varias herramientas de depuración pueden conectarse a este servidor para proporcionar una experiencia de depuración interactiva.

Bun aloja un depurador basado en web en debug.bun.sh. Es una versión modificada de la Interfaz de Web Inspector de WebKit, que resultará familiar a los usuarios de Safari.

bun --inspect server.ts

txt

------------------ Bun Inspector ------------------
Escuchando en:
  ws://localhost:6499/0tqxs9exrgrm

Inspeccionar en el navegador:
  https://debug.bun.sh/#localhost:6499/0tqxs9exrgrm
------------------ Bun Inspector ------------------

Abre la URL de debug.bun.sh proporcionada en tu navegador para iniciar una sesión de depuración. Desde esta interfaz, podrás ver el código fuente del archivo en ejecución, ver y establecer puntos de interrupción, y ejecutar código con la consola integrada.

Establezcamos un punto de interrupción. Navega a la pestaña Sources (Fuentes); deberías ver el código de antes. Haz clic en el número de línea 3 para establecer un punto de interrupción en nuestra declaración console.log(req.url).

Luego visita http://localhost:3000 en tu navegador web. Esto enviará una solicitud HTTP a nuestro servidor web localhost. Parecerá que la página no está cargando. ¿Por qué? Porque el programa ha pausado la ejecución en el punto de interrupción que establecimos anteriormente.

Nota cómo ha cambiado la interfaz de usuario.

En este punto, podemos hacer mucho para introspeccionar el entorno de ejecución actual. Podemos usar la consola en la parte inferior para ejecutar código arbitrario en el contexto del programa, con acceso completo a las variables en alcance en nuestro punto de interrupción.

En el lado derecho del panel Sources (Fuentes), podemos ver todas las variables locales actualmente en alcance, y profundizar para ver sus propiedades y métodos. Aquí, estamos inspeccionando la variable req.

En la parte superior izquierda del panel Sources (Fuentes), podemos controlar la ejecución del programa.

Aquí hay una hoja de referencia que explica las funciones de los botones de control de flujo.

Continuar ejecución del script — continuar ejecutando el programa hasta el siguiente punto de interrupción o excepción.
Step over (Pasar por encima) — El programa continuará a la siguiente línea.
Step into (Entrar en) — Si la declaración actual contiene una llamada de función, el depurador "entrará" en la función llamada.
Step out (Salir de) — Si la declaración actual es una llamada de función, el depurador terminará de ejecutar la llamada, luego "saldrá" de la función a la ubicación donde fue llamada.