Depurando JavaScript en Visual Studio Code

Escribir código es fácil, lo difícil es entender por qué no funciona.

Este capítulo del bloque de sintáxis básica aborda la depuración de código escrito en JS y ejecutado por el runtime Node.JS desde VSCode.

En esencia, no es materia que se pueda adscribir al bloque de sintáxis básica, pero creo que es bueno que conozcas cómo depurar programas antes de abordar el último capítulo del bloque, donde se definen ejercicios cubriendo las materias de la unidad.

Saber depurar te permite seguir la secuencia de ejecución del código, el valor asignado a constantes y variables así como también poder alterar dicho valor. Saber depurar te permitirá solucionar errores en el código del modo más rápido posible.

En síntesis, saber depurar te permitirá sortear una barrera que todo programador serio debe haber superado antes de llegar a serlo.

Índice

1. El programa a depurar
2. El depurador integrado
3. El terminal de depuración de JavaScript
4. Configuración de depuración en VSCode
5. Objetivos conseguidos
6. Próximos pasos

El programa a depurar

Este capítulo va a tomar como base un sencillo programa escrito en JS que define constantes, variables, realiza una operación con ellas y muestra el resultado por pantalla:

const operando1 = 3
const operando2 = 5

let resultado
console.log("Resultado antes de la operación: " + resultado)

resultado = operando1 + operando2
console.log("Resultado tras la operación: " + resultado)

Como dijimos en el capítulo dedicado a VSCode, es buena idea crear una estructura de directorios clara donde ir guardando nuestro código en general y el código de este curso en particular. Te recomiendo guardar el código anterior en este directorio:

// Jeararquía de directorios sugerida
dev
|_ js
   |_ aprendiendo-JS
      |_ 02
         |_ depuracionVSCode

Una vez creado el directorio, ábrelo en VSCode, crea un archivo index.js, agrega el código anterior y guárdalo, tal como se muestra en el siguiente vídeo:

El depurador integrado

Como vimos en el capítulo de introducción a Node.JS, la ejecución de los programas JS escritos en VSCode se basa en ejecutar el runtime node en un terminal.

Sin embargo, también es posible ejecutarlos, y depurarlos, utilizando el depurador de Node.JS que integra nativamente VSCode. Para ello basta con tener nuestro programa abierto en una ventana, acceder al menú "Ejecutar" y seleccionar las opciones "Iniciar depuración" o "Ejecutar sin depuración".

En detalle, para depurar un programa escrito en JS y ejecutado por el runtime node desde VSCode usando el depurador integrado, debemos:

1. Abrir la consola de depuración a través del menú "Ver" si el programa usa la consola para leer o escribir datos
2. Agregar un punto de interrupción en la línea del programa en la que queremos comenzar a depurar
3. Seleccionar la opción "Iniciar depuración" o "Ejecutar sin depuración" del menú "Ejecutar"

El proceso se muestra en el siguiente vídeo:

El depurador de VScode soporta la mayoría de funcionalidades soportadas por los depuradores actuales:

• Permite establecer puntos de interrupción convencionales y también condicionales
• Permite ejecutar instrucción a instrucción, opcionalmente considerando las funciones como una instrucción y por tanto no depurando su contenido
• Permite consultar y modificar el valor de constantes y variables

También tiene ciertas limitaciones, por ejemplo la de no poder omitir la ejecución instrucciones.

El siguiente vídeo muestra tanto las funcionalidades anteriormente enumeradas como sus limitaciones:

El terminal de depuración de JavaScript

Otro modo de depurar nuestro programa es ejecutarlo en un terminal Javascript Debug Terminal de VSCode, que nos permite poder depurar nuestro código JS ejecutado por el runtime node.

Para depurar un programa escrito en JS y ejecutado por el runtime node desde VSCode, debemos:

1. Abrir un terminal de tipo Javascript Debug Terminal (a través del menú "Ver" y la opción "Terminal", seleccionando a continuación un terminal de tipo "Javascript Debug Terminal")
2. Agregar un punto de interrupción en la línea del programa en la que queremos comenzar a depurar
3. Ejecutar node <nombre de archivo> (o node . si el archivo se llama index.js) en el terminal Javascript Debug Terminal

El siguiente vídeo muestra cómo se crea un punto de interrupción en la primera línea de nuestro programa. A continuación se intenta depurar el programa ejecutándo node . desde un terminal convencional, pero como era de esperar el depurador no funciona. Finalmente se abre un terminal de tipo Javascript Debug Terminal y se vuelve a ejecutar node ., y esta vez sí VSCode es capaz de depurar el programa, que se ejecuta paso a paso hasta el final.

Configuración de depuración en VSCode

VSCode nos permite crear configuraciones de depuración para nuestros programas.

En la mayoría de los casos, estas configuraciones nos van a permitir ejecutar y depurar nuestro programa de un modo aún más integrado si cabe, pero su verdadera utilidad se manifiesta al permitirnos, por ejemplo, definir tareas previas o posteriores a la ejecución de nuestro programa, pasarle argumentos por línea de comandos o declarar una serie de variables de entorno que únicamente estarán disponibles para él.

VSCode busca las configuraciones de depuración en un archivo llamado launch.json almacenado en el subdirectorio .vscode de nuestro directorio de trabajo.

Este archivo puede crearse manualmente o permitir que VSCode lo crée por nosotros, como muestra el suguiente vídeo que, además, muestra cómo se pueden utilizar las configuraciones de depuración una vez creadas.

La configuración mínima para poder ejecutar y depurar un programa con el runtime node es esta:

{
  "version": "0.2.0"
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Ejecutar programa",
      "program": "${workspaceFolder}/index.js"
    }
  ]
}

Este archivo define una única configuración para depurar programas ejecutados por el runtime node ("type": "node"). Para ello ejecuta una instancia del runtime ("request": "launch") para ejecutar el programa index.js ("program": "${workspaceFolder}/index.js"). Esta configuración se mostrará en VSCode con la descripción "Ejecutar programa" ("name": "Ejecutar programa"), descripción que queda totalmente a elección del usuario.

Las posibilidades de las configuración de depuración son amplísimas y escalan más allá del alcance de este capítulo. Si estás interesado en conocer algunas puedes encontrar la información de referencia en la ayuda online de VSCode.

Objetivos conseguidos

En este capítulo has aprendido a depurar programas JS en VSCode de distintos modos: a través del depurador integrado y a través del terminal de depuración de JavaScript.

También has aprendido a establecer puntos de interrupción genéricos y condicionales, y has aprendido cómo ejecutar instrucciones paso a paso, continuar con la ejecución del programa o abortar su ejecución.

Finalmente, has aprendido a crear configuraciones de depuración, algo que quizás no necesites utilizar todavía, pero que a no mucho tardar utilizaremos.

Con estos conocimientos, ahora eres capaz ya no de ejecutar cualquier programa de JS, sino de poder depurarlo para encontrar y resolver los problemas que tenga del modo más rápido posible.

Próximos pasos

El próximo capítulo, último de esta unidad, contiene una serie de ejercicios para consolidad los conocimientos aprendidos. Aunque es opcional, te recomiendo encarecidamente que lo abordes con el mayor interés posible.