Como depurar código de servidor de Astro usando Visual Studio Code

00:00 / 00:00

Fecha publicación: 2 dic 2024

Cuando trabajamos con Astro, no nos podemos olvidar que es un generador de sitios estáticos, es decir, hay un montón de código en JavaScript o TypeScript que se ejecuta una sola vez cuando generamos el sitio.

¿Qué pasa si queremos depurar este código? ¿Cómo podemos hacerlo?

TL;DR;

Si tienes prisa, aquí tienes la forma más rápida de lanzar la depuración:

En este proyecto he creado un proyecto Astro mínimo usando el cli de Astro, en concreto el comando npm create astro@latest.

Vamos a añadir algo de javascript en el fichero raíz para que se ejecute sólo una vez, (lo ponemos entre "rejas").

./src/pages/index.astro

+ ---
+ const a = 2;
+ const b = 2;
+
+ const suma = a + b;
+ ---

<html lang="en">

Y lo mostramos en el html.

	<body>
-   <h1>Astro</h1>
+		<h1>2 + 2 son: {suma}</h1>
	</body>
</html>

Si ponemos un breakpoint en la línea 5 en VSCode:

Muestra como hay un breakpoint en la línea 5

Y ejecutamos el comando npm run dev directamente desde el terminal, veremos que no pasa nada.

Vamos a parar esto con CTRL+C y abrir el terminal de "JavaScript Debug Terminal" de VSCode.

Si ahora ejecutamos en ese terminal, podremos ver como se para la ejecución en el breakpoint y podemos por ejemplo, inspeccionar las variables e ir paso a paso.

Esto pasa porque VS Code lanza el proceso de node.js con la opción --inspect habilitada.

Otro tema curioso, es que si le damos a F5, se vuelve a parar el breakpoint, esto es porque por defecto VS Code en este modo volvería a lanzar el proceso.

¿Y cómo es que funciona esto?

Aquí puedes estar pensando, ¡ANDA! ¡MAGIA NEGRA!, vamos a ver esto paso a paso.

Lo primero que podemos pensar es que el CLI de Astro ha metido alguna configuración en el proyecto para que esto funcione, y efectivamente es así, aquí está:

{
  "version": "0.2.0",
  "configurations": [
    {
      "command": "./node_modules/.bin/astro dev",
      "name": "Development server",
      "request": "launch",
      "type": "node-terminal"
    }
  ]
}

Peeero... si la borramos, fijate que sigue funcionando

npm run dev

¿Por qué?

Cuando ejecutas manualmente npm run dev en cualquier terminal (incluso en el JavaScript Debug Terminal), no estás interactuando directamente con las configuraciones del archivo launch.json. En este caso, el proceso Node.js se ejecuta sin configuraciones adicionales definidas por VS Code.

Vaaaleeee ¿Y para que narices quiero un launch.json y como se lanza?

Buena pregunta, nos puede servir para casos más avanzados, imaginate que tenemos dos sets de variables de entorno:

Uno para desarrollo en local.
Otro para desarrollo en qa.

Y queremos poder de manera fácil depurar en un modo u otro, veamos esto paso a paso:

Vamos a definir nuestro archivo de .env

./.env

APIBACK=http://localhost:3000

Y vamos a usarlo en nuestro código.

./src/pages/index.astro

	<body>
		<h1>2 + 2 son: {suma}</h1>
+		<h2>{import.meta.env.APIBACK}</h2>
	</body>

Si ejecutamos podemos ver que se muestra http://localhost:3000.

¿Qué pasa si quiero depurar de forma cómoda con uno u otro entorno?

Pues vamos ahora a generar dos configuraciones

./.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "command": "./node_modules/.bin/astro dev",
      "name": "Dev instance",
      "request": "launch",
      "type": "node-terminal",
      "env": {
        "APIBACK": "http://localhost:3000"
      }
    },
    {
      "command": "./node_modules/.bin/astro dev",
      "name": "QA instance",
      "request": "launch",
      "type": "node-terminal",
      "env": {
        "APIBACK": "http://api.qa.com"
      }
    }
  ]
}

¿Qué tenemos aquí?

En cuanto a estructura general:

"version": "0.2.0": Es la versión del esquema de configuración de depuración utilizado por Visual Studio Code.
"configurations": Es un array de objetos que define las diferentes configuraciones de depuración disponibles, en este ejemplo sólo hay una.

En cuanto a configuraciones tenemos dos diponibles, lo que tienen dentro:

"command": "./node_modules/.bin/astro dev": Es el comando que se ejecuta para iniciar el servidor de desarrollo de Astro, lo buscamos dentro de nuestro proyecto (en la carpeta node_modules/.bin), así no dependemos de dependencias globales.
"name": "Dev instance" o "QA Instancie": Es un nombre amistoso para saber que vamos a lanzar, por ejemplo, si queremos lanzar el servidor de desarrollo en modo desarrollo o en modo qa.
"request": "launch": aquí le decimos a VSCode que lance una nueva instancia del servidor de desarrollo de Astro.
"type": "node-terminal": le indicamos que esta configuración ejecutará el comando en un terminal de node.js, asi podemos ver desde el terminal la salida del servidor de desarrollo de Astro (por ejemplo, mensajes del servidor).
"env": { "APIBACK": "http://localhost:3000" }: Aquí definimos las variables de entorno que queremos que tenga el proceso de node.js que se va a lanzar, en este caso, la variable APIBACK con el valor http://localhost:3000.

Si ahora nos vamos a la pestaña de depuración de VSCode, veremos que tenemos dos opciones para lanzar el servidor de desarrollo de Astro, una en modo desarrollo y otra en modo qa.

Muestra las dos instancias que tenemos para depurar el código

Vamos a lanzar primero el local y después el QA.

Si te fijas cada uno tiene una variable de entorno distinta, y si miramos en el navegador veremos que se muestra una u otra url.