Lemoncode TV

Depurando con JavaScript Debug Terminal

Hasta hace poco, si queríamos depurar nuestro código JavaScript en el editor Visual Studio Code, la única opción que teníamos era la de añadir una configuración en el fichero .vscode/launch.json.

El problema de estas configuraciones es que, dependiendo del proyecto, podía ser una tarea bastante tediosa, ya que necesitamos depurar procesos que se lanzan una sola vez, en modo watch, lanzar el proceso de la aplicación en un puerto y el proceso de depuración en otro, etc. Y ya si añadimos TypeScript o Babel a la ecuación, tenemos que estar pendiente de que estamos depurando los ficheros originales escritos en TypeScript o con una versión moderna de JavaScript, es decir, queremos depurar los mismos ficheros que escribimos, no el compilado.

Para poder depurar de una forma mucho más simple y cómoda, vamos a utilizar el nuevo terminal "Javascript Debug Terminal" que ofrece VS Code, con el que vamos a depurar varios tipos de procesos tanto en JavaScript como en TypeScript.

Manos a la obra

Vamos a partir de este código donde tenemos varios procesos a ejecutar:

• Una aplicación Back End.
• Ejecutar tests una sola vez.
• Ejecutar tests en modo watch.
• Una aplicación Back End en TypeScript.

Si queréis ejecutar este mismo proyecto, recordad hacer un npm install antes de ejecutar cualquier comando

Normalmente, las aplicaciones Front End, directamente las podemos depurar en el propio navegador, pero ¿qué ocurre con el resto de procesos que se ejecutan directamente en el terminal?

Hasta ahora, solamente podíamos depurar utilizando un fichero de configuración, que se puede generar mediante una plantilla rápida haciendo click en el menú Run And Debug > create a launch.json file

./.vscode/launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${file}",
      "outFiles": [
        "${workspaceFolder}/**/*.js"
      ]
    }
  ]
}

Sin embargo, ahora podemos depurarlo utilizando el nuevo terminal "JavaScript Debug Terminal". Solamente necesitamos abrir una pestaña con dicho terminal:

Y ejecutar el comando que necesitemos, vamos a empezar por la aplicación backend, si miramos en el fichero package.json en el apartado de scripts, el comando start:backend ejecuta el fichero index.js en la ruta descrita, utilizando babel-node para que convierta el código "moderno" de JavaScript en código que pueda entender la versión de NodeJS que estamos utilizando, en este caso, node 14 descrito en el fichero .babelrc.

./package.json

  "scripts": {
    "start:backend": "nodemon --exec babel-node ./src/backend/index.js"
  },

Además, utilizamos la librería nodemon para que cada vez que hagamos un cambio en la aplicación, se vuelva a ejecutar el servidor express que estamos implementando:

./src/backend/index.js

import express from 'express';

const PORT = 3000;
const app = express();

app.get('/', async (req, res) => {
  const clients = [
    {
      id: '1',
      name: 'Client 1',
    },
    {
      id: '2',
      name: 'Client 2',
    },
  ];
  res.send(clients);
});

app.listen(PORT, () => {
  console.log(`Backend app running on http://localhost:${PORT}`);
});

Ya solo nos quedaría poner un break point en el fichero ./src/backend/index.js, por ejemplo en la línea 17, ejecutamos el comando en el terminal:

npm run start:backend

Y ahora abrimos el navegador en http://localhost:3000

En el caso de que tengamos una aplicación con tests, podemos ejecutarlos de la misma forma. En concreto, aquí estamos utilizando la librería jest como podemos ver en el package.json

./package.json

  "scripts": {
    "test": "jest"
  },

A continuación, ponemos un break point en el fichero ./src/tests/calculator.spec.js, por ejemplo en la línea 14 y ejecutamos el comando:

npm test

En este caso, no hace falta la palabra run porque test es un comando definido por npm.

Tampoco hace falta indicarle ningun path a jest, ya que por defecto está configurado para ejecutar todos los ficheros que contengan el nombre .spec.js

E incluso el comando en modo watch si queremos ejecutar el mismo fichero de test varias veces:

npm run test:watch

En el caso de que tengamos una aplicación escrita en TypeScript, también tenemos la posibilidad de depurar los ficheros .ts utilizando el mismo terminal. En este caso, tenemos implementada una aplicación parecida a la anterior de backend pero escrita en TypeScript

./package.json

  "scripts": {
    "start:typescript": "nodemon --exec babel-node --extensions \".ts\" ./src/typescript/index.ts"
  },

Aquí tenemos que indicarle a babel que busque la extensiones de fichero .ts y le indicamos el fichero principal index.ts. Podemos poner un break point en el fichero ./src/typescript/index.ts, por ejemplo en la línea 22 y ejecutar el comando:

npm run start:typescript

Y ahora abrimos el navegador en http://localhost:3001

Como vemos, estamos depurando el código escrito en TypeScript

Es importante, que en la configuración de TypeScript, el fichero tsconfig.json, esté configurado para generar los ficheros sourcemaps, que son los ficheros de ayuda para poder depurar el código original escrito en TypeScript. Si utilizamos el terminal "JavaScript Debug Terminal" funcionaría la depuración aunque lo tengamos desactivado ("sourceMap": false), pero es bueno tenerlo activado si usamos la depuración mediante el fichero launch.json.

./tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "sourceMap": true
  },
  "include": ["src/**/*"]
}

Este terminal nos ayuda a poder depurar nuestro código JavaScript / TypeScript de una manera simple y rápida, aunque siempre tenemos la opción de configurar el fichero launch.json para configuraciones más avanzadas o para otro tipo de lenguajes que necesitemos depurar.

¿Te apuntas a nuestro máster?

Si te ha gustado este ejemplo y tienes ganas de aprender Front End guiado por un grupo de profesionales ¿Por qué no te apuntas a nuestro Máster Front End Online Lemoncode? Tenemos tanto edición de convocatoria con clases en vivo, como edición continua con mentorización, para que puedas ir a tu ritmo y aprender mucho.