Desarrollo y depuración de Node.js con Visual Studio Code

Conozca los pasos para desarrolladores y depure el proyecto de Node.js en JavaScript con Visual Studio.

Preparación del entorno

  1. Instale Visual Studio Code.

  2. Instale git. Visual Studio Code se integra con git para proporcionar administración del control de código fuente en la barra lateral.

  3. Obtenga una cadena de conexión de base de datos de mongoDB.

    Si no tiene una base de datos de mongoDB disponible, puede:

    • Elegir ejecutar este proyecto local en una configuración de varios contenedores donde uno de ellos sea una base de datos de mongoDB. Instalar la extensión Docker y Remote - Containers para obtener una configuración de varios contenedores, donde uno de ellos ejecute una base de datos de mongoDB local.
    • Elija crear un recurso de Azure Cosmos DB para una base de datos de mongoDB. Más información con este tutorial.

Clonación del proyecto de ejemplo en el equipo local

Para empezar, descargue el proyecto de ejemplo mediante los pasos siguientes:

  1. Abra Visual Studio Code.

  2. Presione F1 para mostrar la paleta de comandos.

  3. En el símbolo de la paleta de comandos, escriba gitcl , seleccione el comando gitcl y presione Entrar.

    Comando gitcl en el símbolo de la paleta de comandos de Visual Studio Code

  4. Cuando se le solicite la dirección URL del repositorio,escriba y presione Entrar.

  5. Seleccione el directorio local en el que va a clonar el proyecto, o créelo.

    Explorador de Visual Studio Code

Uso del terminal de Bash integrado para instalar dependencias

Con este proyecto de Node.js, lo primero que debe hacer es asegurarse de que todas las dependencias del proyecto se instalen desde npm.

  1. Presione Ctrl` para mostrar el terminal integrado de Visual Studio Code.

  2. Escriba yarn y presione yarn

    Ejecute el comando yarn dentro de Visual Studio Code

Para orientarnos en el código base, vamos a ver algunos ejemplos de algunas de las funcionalidades de navegación que proporciona Visual Studio Code.

  1. Presione CtrlP.

  2. Escriba .js para mostrar todos los archivos JavaScript/JSON en el proyecto junto con el directorio principal de cada archivo.

  3. Seleccione server.js, que es el script de inicio de la aplicación.

  4. Mantenga el puntero sobre la variable base de datos (importada en la línea 6) para ver su tipo. Esta capacidad de inspeccionar rápidamente variables/módulos/tipos en un archivo resulta útil durante el desarrollo de los proyectos.

    Detección del tipo en Visual Studio Code con la ayuda emergente

  5. Si hace clic en el mouse dentro del intervalo de una variable, como database, le permite ver todas las referencias a esa variable dentro del mismo archivo. Para ver todas las referencias a una variable dentro del proyecto, haga clic con el botón derecho en la variable y, en el menú contextual, seleccione Buscar todas las referencias.

    Búsqueda de todas las referencias con Visual Studio Code

  6. Además de mantener el puntero sobre una variable para descubrir su tipo, puede inspeccionar la definición de una variable, incluso si se encuentra en otro archivo. Por ejemplo, haga clic con el botón derecho en database.localUrl (línea 12) y, en el menú contextual, seleccione Ver la definición.

    Consulta de la definición de la variable en Visual Studio Code

Uso de la función Autocompletar de Visual Studio Code con mongoDB

La cadena de conexión de MongoDB está codificada de forma rígida en la declaración de la propiedad database.localUrl. En esta sección, va a modificar el código para recuperar la cadena de conexión de una variable de entorno y aprenderá sobre la característica de autocompletar de Visual Studio Code.

  1. Abra el archivo server.js.

  2. Reemplace el código siguiente:

    mongoose.connect(database.localUrl);
    

    por este otro:

    mongoose.connect(process.env.MONGODB_URL || database.localUrl);
    

Si escribe el código de forma manual (en lugar de copiarlo y pegarlo), cuando escriba el punto después de process, Visual Studio Code mostrará los miembros disponibles de la API global de proceso de Node.js.

Variables de entorno de VS Code con el entorno process

La característica de autocompletar funciona porque Visual Studio Code usa TypeScript en segundo plano (incluso para JavaScript) con el fin de proporcionar información de tipo que puede utilizarse para informar a la lista de finalización a medida que escribe. Visual Studio Code es capaz de detectar que se trata de un proyecto Node.js y, como resultado, se descarga automáticamente el archivo typings de TypeScript para Node.js desde NPM. El archivo typings le permite obtener la función de autocompletar para otras funciones globales de Node.js (como Buffer y setTimeout), así como para todos los módulos integrados como fs y http.

Además de las API de Node.js integradas, esta adquisición automática del archivo typings también funciona con más de 2000 módulos de terceros, como React, Underscore y Express. Por ejemplo, para deshabilitar Mongoose para bloquear la aplicación de ejemplo si no se puede conectar a la instancia de base de datos de MongoDB configurada, inserte la siguiente línea de código en la línea 13:

mongoose.connection.on("error", () => { console.log("DB connection error"); });

Al igual que con el código anterior, observará se autocompletará sin ningún trabajo por su parte.

La característica de autocompletar muestra automáticamente los miembros de una API

Para ver qué módulos son compatibles con esta funcionalidad de autocompletar, examine el proyecto DefinitelyTyped, que es el código fuente administrado por la comunidad de todas las definiciones de tipos de TypeScript.

Ejecución de la aplicación local de Node.js

Cuando haya explorado un poco el código, es el momento de ejecutar la aplicación. Para ejecutar la aplicación desde Visual Studio Code, presione F5. Cuando se ejecuta el código con F5 (modo de depuración), Visual Studio Code inicia la aplicación y muestra la ventana Consola de depuración con la salida estándar de la aplicación.

Supervisión del stdout de una aplicación a través de la consola de depuración

Además, la Consola de depuración se adjunta a la aplicación recién ejecutada para que pueda escribir expresiones de JavaScript, que se evaluarán en la aplicación. También incluye la función de autocompletar. Para ver este comportamiento, escriba process.env en la consola:

Escritura de código en la Consola de depuración

Puede presionar F5 para ejecutar la aplicación porque el archivo abierto actualmente es un archivo de JavaScript (server.js). Como resultado, Visual Studio Code asume que el proyecto es una aplicación Node.js. Si cierra todos los archivos de JavaScript en Visual Studio Code y después presiona F5, Visual Studio Code le consultará el entorno:

Especificación del entorno en tiempo de ejecución

Abra un explorador y vaya a http://localhost:8080 para ver la aplicación en ejecución. Escriba un mensaje en el cuadro de texto y agregue o quite algunas tareas pendientes para hacerse una idea de cómo funciona la aplicación.

Adición o eliminación de tareas pendientes con la aplicación

Depuración de la aplicación Node.js local

Además de poder ejecutar la aplicación e interactuar con ella a través de la consola integrada, puede establecer puntos de interrupción directamente dentro del código. Por ejemplo, presione CtrlP para mostrar el selector de archivos. Una vez que se muestre el selector de archivos, escriba route y seleccione el route archivo.

Establezca un punto de interrupción en la línea 28, que representa la ruta de Express que se llama cuando la aplicación intenta agregar una entrada a la lista de tareas. Para establecer un punto de interrupción, simplemente haga clic en el área situada a la izquierda del número de línea en el editor, tal como se muestra en la ilustración siguiente.

Establecimiento de un punto de interrupción en Visual Studio Code

Nota

Además de los puntos de interrupción estándares, Visual Studio Code admite puntos de interrupción condicionales que le permiten personalizar cuando la aplicación debe suspender la ejecución. Para establecer un punto de interrupción condicional, haga clic con el botón derecho en el área situada a la izquierda de la línea en la que desea pausar la ejecución, seleccione Agregar punto de interrupción condicional y especifique una expresión de JavaScript (por ejemplo, ) o un recuento de ejecuciones que defina la condición en la que desea pausar la ejecución.

Una vez establecido el punto de interrupción, vuelva a la aplicación en ejecución y agregue una entrada a la lista de tareas. Si agrega una entrada a la lista de tareas inmediatamente, hará que la aplicación suspenda la ejecución en la línea 28 en la que estableció el punto de interrupción:

Ejecución de Visual Studio Code en pausa en un punto de interrupción

Cuando se ha detenido la aplicación, mantenga el puntero sobre expresiones del código para ver su valor actual, inspeccione las variables locales e inspecciones y la pila de llamadas, y use la barra de herramientas de depuración para recorrer la ejecución del código. Presione F5 para reanudar la ejecución de la aplicación.

Depuración local de la pila completa en Visual Studio Code

Tal y como se mencionó anteriormente en este tema, la aplicación de la lista de tareas es una aplicación MEAN, lo que significa que su front-end y back-end están ambos escritos con JavaScript. Por lo tanto, mientras está depurando el código de back-end (Node/Express), en algún momento debe depurar el código de front-end (Angular). Para ello, Visual Studio Code tiene un enorme ecosistema de extensiones, incluida la depuración de Chrome integrada.

Cambie a la pestaña Extensiones y escriba en el cuadro de búsqueda:

Extensión de depuración de Chrome para Visual Studio Code

Seleccione la extensión denominada Debugger for Chrome (Depurador para Chrome) y seleccione Instalar. Después de instalar la extensión de depuración de Chrome, seleccione Recargar para cerrar y volver a abrir Visual Studio Code para activar la extensión.

Recarga de Visual Studio Code después de instalar la extensión de depuración de Chrome

Aunque podía ejecutar y depurar el código de Node.js sin ninguna configuración específica de Visual Studio Code, para depurar una aplicación web de front-end debe generar un archivo launch.json, que indica a Visual Studio Code cómo ejecutar la aplicación.

Creación de un archivo launch.json de pila completa para Visual Studio Code

Para generar el archivo launch.json, cambie a la pestaña Depurar, seleccione el icono de engranaje (que tendrá un pequeño punto rojo en la parte superior) y elija el entorno node.js.

Opción de Visual Studio Code para configurar el archivo de launch.json

Una vez creado, el archivo launch.json tiene un aspecto similar al siguiente, e indica a Visual Studio Code cómo iniciar o adjuntar la aplicación para depurarla.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/server.js"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Port",
            "address": "localhost",
            "port": 5858
        }
    ]
}

Visual Studio Code pudo detectar que el script de inicio de la aplicación era server.js.

Con archivo launch.json abierto, seleccione Agregar configuración (abajo a la derecha) y seleccione Chrome: Launch with userDataDir (Chrome: iniciar con userDataDir).

Adición de una configuración de Chrome a Visual Studio Code

Si se agrega una nueva configuración de ejecución para Chrome, podrá depurar el código de JavaScript de front-end.

Puede mantener el puntero sobre cualquiera de las opciones que se especifican para ver la documentación sobre lo que hace la configuración. Además, tenga en cuenta que Visual Studio Code detecta automáticamente la dirección URL de la aplicación. Actualice la propiedad webRoot a para que el depurador de Chrome sepa dónde encontrar los recursos de front-end de la aplicación:

{
   "type": "chrome",
   "request": "launch",
   "name": "Launch Chrome",
   "url": "http://localhost:8080",
   "webRoot": "${workspaceRoot}/public",
   "userDataDir": "${workspaceRoot}/.vscode/chrome"
}

Para iniciar y depurar tanto el front-end como el back-end al mismo tiempo, tiene que crear una configuración de ejecución compuesta que indique a Visual Studio Code el conjunto de configuraciones que se van a ejecutar en paralelo.

Agregue el siguiente fragmento de código como una propiedad de nivel superior dentro del archivo launch.json (como un elemento del mismo nivel de la propiedad configurations existente).

"compounds": [
   {
      "name": "Full-Stack",
      "configurations": ["Launch Program", "Launch Chrome"]
   }
]

Los valores de cadena especificados en la matriz compounds.configurations hacen referencia al nombre de las entradas individuales de la lista de configurations. Si ha modificado esos nombres, debe realizar los cambios correspondientes en la matriz. Por ejemplo, cambie a la pestaña de depuración y cambie la configuración seleccionada a Full-Stack (Pila completa), que es el nombre de la configuración compuesta, y presione F5 para ejecutarla.

Ejecución de una configuración en Visual Studio Code

Si se ejecuta la configuración, se inicia la aplicación Node.js (como puede verse en la salida de la consola de depuración) y Chrome (configurado para navegar a la aplicación Node.js en http://localhost:8080).

Presione CtrlP y escriba (o seleccione)todos.js, que es el controlador de Angular principal del front-end de la aplicación.

Establezca un punto de interrupción en la línea 11, que es el punto de entrada para una nueva entrada de lista de tareas que se está creando.

Vuelva a la aplicación en ejecución, agregue una nueva entrada de lista de tareas y tenga en cuenta que Visual Studio Code ahora ha suspendido la ejecución dentro del código Angular.

Depuración de código de front-end en Visual Studio Code

Similar a la depuración de Node.js, puede mantener el puntero sobre las expresiones, ver las variables locales e inspecciones, evaluar las expresiones en la consola y así sucesivamente.

Hay dos aspectos importantes que deben tenerse en cuenta:

  1. El panel Pila de llamadas muestra dos pilas diferentes: Node y Chrome, e indica cuál está actualmente en pausa.

  2. Puede cambiar del código de front-end al de back-end: presione F5 para ejecutar y mostrar el punto de interrupción previamente establecido en la ruta exprés.

Con esta configuración, ahora puede depurar eficazmente el código de JavaScript de pila completa, de front-end y back-end directamente en Visual Studio Code.

Además, el concepto de depurador compuesto no está limitado únicamente a dos procesos de destino y además no está limitado a JavaScript. Por tanto, si funciona en una aplicación de microservicio (que sea potencialmente políglota), puede usar el mismo flujo de trabajo (una vez que haya instalado las extensiones correspondientes para el lenguaje o plataforma).

Pasos siguientes