Cómo usar el depurador en VS Code

VS (o Virtual Studio) Code es un editor de código gratuito que admite todos los principales lenguajes de programación. Hace que sea rápido y fácil para los programadores mirar la codificación y editarla cuando sea necesario. Funciona como un IDE para personas que escriben código. pero no previene errores. Afortunadamente, VSCode tiene una ingeniosa herramienta de depuración integrada en el programa.

Cómo usar el depurador en VS Code

En este artículo, le mostraremos cómo usar el depurador en el código VS.

¿Qué es un depurador?

Cuando esté codificando, habrá ocasiones en las que el código que escriba tenga algunos problemas. Es posible que estos problemas no sean culpa del codificador, sino que simplemente aparecen debido a que algo se vuelve loco por sí solo. Estos "errores" pueden hacer que los programas dejen de funcionar. Por esa razón, es importante que los codificadores los encuentren y los eliminen.

Un depurador es un programa que localiza errores y los corrige automáticamente o sugiere formas de hacerlo. VSCode tiene uno incorporado, pero existen muchos métodos diferentes para utilizar el depurador. Estas son algunas formas de usar el depurador en VS Code.

El depurador tiene JavaScript, TypeScript y todos los demás lenguajes que usan compiladores de Java. Otros lenguajes como Python o Ruby necesitarán extensiones instaladas.

Para ello, sigue estos pasos:

  1. En el menú superior, seleccione "Instalar depuradores adicionales".
    1672027211 598 Como usar el depurador en VS Code
  2. Selecciona los lenguajes de programación que te gustaría usar.
  3. El idioma se descargará y se ingresará en su base de datos. Ahora puede ejecutar el depurador usando el idioma deseado.

A continuación, veremos cómo usar el depurador en VSCode.

Crear una base de datos Node.js

Node.js es la plataforma que el depurador de VSCode ejecuta de forma predeterminada. Lo necesita para rastrear todo lo que sucede con su código. Esto hace que sea más fácil identificar el problema. Además, hay algunas funciones en el depurador de VSCode que solo funcionan con JavaScript. Tendrás que crear un programa sencillo, el famoso programa “Hello, World”. Una vez que complete este paso, la ejecución del depurador será fácil y rápida.

Para crear un Node.js, siga estos pasos:

  1. Antes de comenzar, asegúrese de tener Nodo.js descargado e instalado en su computadora.
    1672027212 782 Como usar el depurador en VS Code
  2. Para ver si Node.js está instalado, cree una nueva terminal y escriba "node—version" en la terminal. Debería aparecer la versión de Node.js que instaló.
    1672027212 842 Como usar el depurador en VS Code
  3. Cree una carpeta vacía en su escritorio y asígnele el nombre "hola".
    1672027214 855 Como usar el depurador en VS Code
  4. Abra VSCode y en el símbolo del sistema, escriba el siguiente código:
    mkdir hola
    hola
    código.
    1672027214 269 Como usar el depurador en VS Code
  5. Busque la barra de herramientas del Explorador de archivos. Su archivo debería aparecer con el nombre "Hola". Haga clic en el botón "Nuevo archivo" en el lado derecho del nombre del archivo.
    1672027214 504 Como usar el depurador en VS Code
  6. Nombre el nuevo archivo "app.js"
    1672027215 551 Como usar el depurador en VS Code
  7. En el comando de la consola, escriba el siguiente código:
    var mensaje = 'Hola Mundo';
    consola.log(mensaje);
    1672027215 840 Como usar el depurador en VS Code
  8. Guarde el archivo presionando "Ctrl + S" en el teclado.
    1672027215 239 Como usar el depurador en VS Code
  9. En una terminal, escriba node app.js. La salida dirá "Hola, mundo".
    1672027216 17 Como usar el depurador en VS Code

Felicitaciones, ha escrito su primer programa y ahora está listo para ejecutar el depurador de VSCode.

Ejecutar vista

Desde aquí, podrá utilizar todas las funciones de depuración de VSCode. Cuando comience por primera vez, deberá familiarizarse con toda la información que el depurador tiene para usted. También incluye una barra de tareas donde puede configurar ajustes y comandos de depuración.

Para acceder a Run View, haga lo siguiente:

  1. En la barra lateral de VSCode, seleccione el icono "Ejecutar". También puede acceder rápidamente presionando "Ctrl + Shift + D" en su teclado.
    1672027216 202 Como usar el depurador en VS Code
  2. Aparecerá un menú con tres opciones. A los efectos de esta guía, seleccione la opción "crear un launch.js".
    1672027216 429 Como usar el depurador en VS Code

Crear un programa Launch.js

Un programa launch.js se denomina programa de configuración de lanzamiento. Guardará automáticamente cualquier configuración nueva y cambios de configuración que realice durante la depuración. Esto le ahorrará tiempo si se encuentra con el mismo error que ocurrió anteriormente. Piense en ello como un tomador de notas para su codificación.

Tenga en cuenta que necesitará tener este programa antes de que finalmente pueda ejecutar el depurador.

Aquí está cómo hacerlo:

  1. En el menú "Ejecutar vista", seleccione "crear un launch.js".
    1672027216 429 Como usar el depurador en VS Code
  2. VSCode seleccionará automáticamente el entorno de depuración, pero si no detecta nada, seleccione "Node.js".
    1672027217 783 Como usar el depurador en VS Code
  3. Regrese al Explorador de archivos presionando "Ctrl + Shift + E".
    1672027217 194 Como usar el depurador en VS Code
  4. Revisa debajo de tu carpeta "hola". Debería haber una pestaña llamada ".vscode" y el archivo launch.json debería estar en esa pestaña.
    1672027218 457 Como usar el depurador en VS Code
  5. Para verificar los atributos del depurador, presione “Ctrl+Espacio”.
    1672027219 102 Como usar el depurador en VS Code

Ejecutar el depurador

Ahora que toda la preparación está lista, podemos comenzar nuestra sesión de depuración. Para ejecutar el depurador, primero necesitaremos seleccionar nuestra configuración de lanzamiento.

  1. En la vista Ejecutar de VSCode, busque "Configuración desplegable".
    1672027219 564 Como usar el depurador en VS Code
  2. Seleccione "Programa de lanzamiento". Una vez que lo haya seleccionado, presione F5 para iniciar el depurador.
    1672027220 870 Como usar el depurador en VS Code
  3. También puede acceder al menú del depurador accediendo primero a la Paleta de comandos presionando "Ctrl+Shift+P"
    1672027221 704 Como usar el depurador en VS Code
    1672027221 88 Como usar el depurador en VS Code
  4. Escriba ".debug" y seleccione su configuración.
    1672027222 499 Como usar el depurador en VS Code

Agregar una nueva configuración

Con errores particularmente difíciles, existe la posibilidad de que la base de datos que tiene en VSCode no tenga la configuración que necesita. Afortunadamente, puede agregar nuevas configuraciones al depurador.

  1. En el menú "Ejecutar", seleccione "Agregar configuración".
    1672027222 415 Como usar el depurador en VS Code
  2. Abra IntelliSense (Mayús+Espacio) para abrir el menú, luego seleccione "Agregar configuración".
    1672027223 767 Como usar el depurador en VS Code
  3. Dentro de la matriz de configuración de IntelliSense, elija agregar otra configuración.
    1672027223 276 Como usar el depurador en VS Code

Configuraciones de lanzamiento frente a adjuntar

VSCode tiene dos modos de depuración: "lanzar" y "adjuntar". Cada modo tiene sus pros y sus contras y cada uno se adapta a un cierto tipo de codificador. Aquí hay un breve desglose de la metodología para cada modo.

Primero, analicemos las configuraciones de "lanzamiento". Las configuraciones de lanzamiento significan que usted, el codificador, está escribiendo el código o la "receta" para su sesión de depuración.

Las configuraciones "Adjuntar", por otro lado, implican que usted adjunte una configuración desde fuera de VSCode mientras se ejecuta el programa en VSCode. No está creando nada desde cero, sino que utiliza código creado previamente para depurar.

Adjuntar automáticamente

Adjuntar automáticamente es una característica que adjuntará automáticamente el depurador de Node a ciertos procesos de Node.js en la terminal de VSCode. Para habilitar Adjuntar automáticamente, siga estos pasos:

  1. Para acceder a la paleta de comandos, presione "Ctrl+Shift+P" en su teclado.
    1672027221 704 Como usar el depurador en VS Code
  2. Cuando aparezca el menú, seleccione "Alternar Adjuntar automáticamente". La barra Adjuntar automáticamente debería aparecer en la parte superior.
    1672027224 744 Como usar el depurador en VS Code
  3. Después de activar la conexión automática, deberá reiniciar su dispositivo.
  4. También puede crear un nuevo terminal y la conexión automática seguirá estando habilitada.

La conexión automática viene con tres modos diferentes para elegir. Cada uno tiene su propia función, así que asegúrate de elegir el correcto. Aquí están los tres modos:

  • “Inteligente”: esta es la opción predeterminada. Cuando ejecuta un script que no está contenido en su carpeta "node_modules", el script se depurará automáticamente.
  • “Siempre”: se depurará cualquier proceso que utilice Node.js que se inicie en el terminal integrado.
  • “OnlyWithFlag”: esta opción solo depurará los procesos que estén marcados con las banderas “- -inspect” o “- -inspect-brk”.

1672027224 205 Como usar el depurador en VS Code

Adjuntar al proceso de nodo

También puede adjuntar su depurador de Node.js a los procesos manualmente. Esto requiere un poco más de trabajo, pero le ahorrará tiempo si sabe exactamente qué proceso está causando problemas. Para adjuntar el depurador a un proceso de Node.js, haga lo siguiente:

  1. Abra la paleta de comandos presionando "Ctrl + Shift + P" en su teclado.
    1672027221 704 Como usar el depurador en VS Code
  2. Seleccione "Adjuntar al proceso de nodo" en el menú.
    1672027225 939 Como usar el depurador en VS Code
  3. Desde aquí, verá todos los procesos que el depurador de Node.js puede depurar. Seleccione a qué proceso desea adjuntar el depurador.
    1672027225 955 Como usar el depurador en VS Code

Terminal de depuración de JavaScript

Agregar un terminal de depuración de JavaScript es rápido y sencillo, y es una excelente opción si desea corregir errores de forma amplia o general. Primero, necesitarás hacer una terminal.

  1. Abra la paleta de comandos presionando "Ctrl + Shift + P" en su teclado.
    1672027221 704 Como usar el depurador en VS Code
  2. Seleccione "Depurar: Crear terminal de depuración de JavaScript" en el menú.
    1672027226 358 Como usar el depurador en VS Code
  3. También puede acceder a esta opción seleccionándola en el menú desplegable de la terminal.
    1672027226 421 Como usar el depurador en VS Code
  4. El depurador se adjuntará a su proceso actual. Se ejecutará automáticamente y corregirá cualquier error en el código que detecte.
    1672027226 36 Como usar el depurador en VS Code

Establecer una configuración de "adjuntar"

Esta opción es mucho más laboriosa que las descritas anteriormente, pero le permite configurar las configuraciones de depuración en detalle.

  1. Una configuración simple de "adjuntar" generalmente se verá como este lote de código
    {
    "name": "Adjuntar a Proceso",
    "tipo": "nodo",
    "solicitud": "adjuntar",
    "puerto": 9229
    }
    1672027227 874 Como usar el depurador en VS Code
  2. 9229 es el número de puerto predeterminado para las opciones “- -inspect” y “- – inspect-brk”. Para cambiar el número de puerto, escriba lo siguiente: “- - inspeccionar =95430”
    1672027227 367 Como usar el depurador en VS Code
    Nota: estos números son solo ejemplos. Utilice el número de puerto que funcione para usted.
  3. Después de cambiar el número de puerto, cámbielo en la configuración adjunta que escribió.

Para adjuntar el depurador a un proceso que no está actualmente en el depurador, haga lo siguiente:

  1. Deberá especificar qué proceso ingresando la ID en una cadena de código similar a la siguiente:
    {
    "name": "Adjuntar al proceso",
    "tipo": "nodo",
    "solicitud": "adjuntar",
    "id del proceso": "53426"
    }
    1672027228 635 Como usar el depurador en VS Code
  2. Es bastante tedioso ingresar manualmente cada ID de proceso. Afortunadamente, puede abrir la lista completa ingresando "${command:PickProcess}" en la parte "processId" de la cadena.

Depuración de objetivos múltiples

Habrá momentos en los que haya desastres de codificación y su código esté plagado de errores y nada funcione. VSCode admite errores de varios objetivos y le permite ejecutar varios depuradores en varios procesos. Para iniciar la depuración de múltiples objetivos, todo lo que necesita hacer es iniciar otra sesión de depuración sin cerrar la primera.

Una vez que comience la depuración de objetivos múltiples, cada sesión se mostrará como un elemento individual en la parte superior del menú "PILAS DE LLAMADAS". Puede seleccionar qué sesión desea que esté activa.

La barra de herramientas de depuración y las acciones de depuración realizadas se realizarán en el proceso activo, así que asegúrese de que el proceso en el que desea trabajar esté activo.

Detener la depuración

Finalmente has llegado al final y todos esos molestos errores han sido eliminados. Ahora debe cerrar su operación de depuración. Es importante hacer esto para asegurarse de que su trabajo se guarde.

Configuraciones "Adjuntar"

  1. Seleccione "Depurar: Detener" en la barra de herramientas de depuración o después de abrir la paleta de comandos presionando "Ctrl+Shift+P".
    1672027228 157 Como usar el depurador en VS Code
  2. Después de hacer clic en Detener, el depurador de Node.js se separará y se apagará. Sin embargo, el proceso que ingresó seguirá ejecutándose.
    1672027229 290 Como usar el depurador en VS Code
  3. Para detener los procesos que está ejecutando, vaya a la barra de tareas y seleccione "Detener".

Configuraciones de “lanzamiento”

  1. Después de seleccionar "Detener", VSCode le pedirá que apague enviando una señal SIGINT.
  2. Antes de interceptar la señal, limpie cualquier cosa y luego apague.
  3. Si no hay puntos de interrupción (o problemas) en ese código de apagado, la sesión finalizará.

Depuradores desmitificados

La herramienta Debugger de VSCode es muy útil para tenerla a su disposición. Sin embargo, hay muchas opciones y puede ser difícil decidir qué método desea utilizar. Hemos enumerado los métodos de nivel principiante y avanzado para usar el depurador, por lo que tiene la opción de depurar como desee.

¿Utiliza el depurador VSCode? ¿Qué método crees que es el mejor? Háganos saber en la sección de comentarios.