Cómo depurar aplicaciones Node.js en Visual Studio Code

La depuración de su aplicación Node.js en Visual Studio Code es posible y sencilla. El editor de VS Code viene con un depurador integrado capaz de depurar cualquier aplicación que se dirija al tiempo de ejecución de Node.js. Esto significa que puede depurar JavaScript o cualquier otro lenguaje que se compile en él (por ejemplo, TypeScript).

Este artículo lo guiará a través de los pasos para depurar su aplicación Node.js en VS Code. Aprenderá a iniciar una sesión de depuración, insertar puntos de interrupción, adjuntar un proceso externo y depurar código TypeScript mediante mapas de origen.

Lo que necesitas para empezar

Antes de comenzar, instale Node.js y VS Code en su máquina local. La última versión de Node.js está disponible en el Nodo.js página web oficial. De manera similar, para Visual Studio Code, descargue la última versión de la

Código VS sitio web. Para instrucciones sobre cómo configurar VS Code en Windows, lea nuestra guía de configuración.

También necesita un proyecto Node.js. Puede crear una aplicación Node.js simple desde cero o utilizar una aplicación existente.

El proceso de depuración en VS Code

Iniciar una sesión de depuración en el editor de VS Code es bastante sencillo. Abra el archivo con VS Code y haga clic en el Ejecutar y depurar icono en la barra lateral (o presione Ctrl + Mayús + D en su teclado). A continuación, haga clic en el Ejecutar y depurar botón para iniciar el proceso.

De forma predeterminada, Node.js intentará descubrir el entorno de depuración de su proyecto. Pero si la detección automática no tiene éxito, le pedirá que seleccione el entorno correcto. Para este tutorial, ese entorno es Node.js.

Una vez que haya seleccionado el entorno, VS Code activa el depurador y lo adjunta al proceso. Puedes ver tu salida en el CONSOLA DE DEPURACIÓN. Usando la barra de herramientas de depuración en la parte superior, puede iterar a través del código, pausar la ejecución o finalizar la sesión.

También tiene la opción de crear un archivo de configuración. El lanzamiento.json El archivo le permite configurar y configurar los detalles de depuración. Si su secuencia de comandos requiere un argumento, proporcione estos argumentos en el lanzamiento.json archivo. Se pueden establecer múltiples opciones en cada configuración:

{ 
"versión": "0.2.0", 
"configuraciones": [ 
 { "tipo": "nodo", 
"pedido": "lanzamiento", 
"nombre": "Programa de lanzamiento", 
"saltar archivos": [ "/**" ], 
"programa": "${carpeta de espacio de trabajo}\\index.js"
 } 
 ]
}

También notará cinco paneles en el lado izquierdo del editor. Estos paneles son VARIABLES, MIRAR, PILA DE LLAMADAS, GUIONES CARGADOS, y PUNTOS DE RUPTURA:

Cuando haya terminado de establecer la configuración, seleccione y ejecute el programa a través del menú de configuración.

Adjuntar un proceso externo

Otro método para configurar una sesión de depuración de Node.js es adjuntar un proceso externo. Inicie el programa con el siguiente comando:

nodo --inspeccionar index.js

Insertar el -brk bandera después --inspeccionar si desea adjuntarlo antes de que el programa comience a ejecutarse.

A continuación, abra el selector de procesos en VS Code. Esto enumera todos los procesos disponibles en el entorno Node.js. Para abrir el selector, presione Ctrl + Mayús + P y encuentra el Depuración: adjuntar al comando Node.js.

Haga clic en el comando y seleccione la opción correcta para iniciar el proceso de depuración.

Creación de un punto de interrupción

Si desea hacer una pausa en puntos específicos de su programa para inspeccionar el código, establezca puntos de interrupción allí. Puede establecer puntos de interrupción en casi cualquier parte de su código. Esto incluye declaraciones de variables, expresiones y comentarios. Pero no puede establecer puntos de interrupción en las declaraciones de funciones.

Crear un punto de interrupción es bastante sencillo. A medida que mueve el mouse hacia el lado izquierdo de los números de línea, aparece un círculo rojo en cada línea. Identifique el número de línea en su código donde desea insertar el punto de interrupción. Luego haga clic en esa línea para agregar el punto de interrupción:

En el PUNTOS DE RUPTURA panel, encontrará todos los puntos de interrupción habilitados en su proyecto. Aquí es donde administrará, editará y deshabilitará los puntos de interrupción. También puede detener el código cuando se produce una excepción o en casos de excepciones no detectadas. Esto le permite inspeccionar el problema antes de que finalice el proceso.

Veamos los puntos de interrupción en acción. Haga clic en el Lanzamiento icono para iniciar la sesión de depuración. El programa se detendrá en el primer punto de interrupción y arrojará el valor para la inspección:

Puede hacer clic en el Continuar (o presione F5) para mover el programa al siguiente punto de interrupción. Esto continuará hasta que llegue al final del programa.

Depuración de TypeScript con mapas de origen

A medida que Typescript continúa creciendo en popularidad, la cantidad de proyectos de Node.js escritos en TypeScript seguramente aumentará. Afortunadamente, también puede depurar proyectos basados ​​en TypeScript con VS Code.

Primero, crea un tsconfig.json archivo en el directorio raíz de su proyecto (si aún no se ha creado) y habilite los mapas de origen:

{ "opciones del compilador": { "mapas fuente": verdadero }}

A continuación, adjunte el proceso en ejecución y establezca los puntos de interrupción en su archivo TypeScript. Visual Studio Code encontrará los mapas de origen y los utilizará.

Puede decirle explícitamente a VS Code dónde encontrar los mapas de origen. Para hacer esto, agregue un salirarchivos atributo en su archivo de configuración de lanzamiento y apúntelo a la ubicación exacta de sus mapas de origen:

{ 
"versión": "0.2.0", 
"configuraciones": [ { 
"tipo": "nodo", 
"pedido": "lanzamiento", 
"nombre": "Programa de lanzamiento", 
"saltar archivos": [ "/**" ], 
"programa": "${carpeta de espacio de trabajo}\\index.js", 
"outFiles": "${carpeta de espacio de trabajo}\\index.js", 
 } 
 ]
}

Si estás usando ts-nodo para ejecutar su proyecto sin un paso de compilación, use esto en lugar de la configuración anterior:

{ 
"versión": "0.2.0", 
"configuraciones": [ { 
"tipo": "nodo pwa", 
"pedido": "lanzamiento", 
"nombre": "Lanzar servidor", 
"saltar archivos": [ "/**" ], 
"args de tiempo de ejecución": [ "-r", "ts-nodo/registro" ], 
"argumentos": [ "${carpeta del espacio de trabajo}/src/server.ts" ] 
 }]
}

Dado que no hay ningún atributo de programa, el tiempo de ejecución argumentos registros ts-nodo como controlador de archivos TypeScript. El primer argumento a argumentos es el archivo de entrada para el programa. Ahora puede iniciar su sesión de depuración. Si está desarrollando con Vanilla JavaScript o un marco front-end, también puede depurar el código JavaScript en el navegador.

Otras características en el código de Visual Studio

Visual Studio Code es un potente editor de código fuente repleto de características sorprendentes. Cubrimos la herramienta de depuración integrada de VS Code. También demostramos cómo puede usarlo para depurar su aplicación Node.js.

Pero hay muchas otras características útiles en VS Code. Si bien es posible que esté familiarizado con algunos de ellos, algunos pueden ser completamente nuevos para usted. En ese caso, podría interesarle conocer estas funciones y cómo usarlas.