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.

ANUNCIO

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".
   
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 haber descargado e instalado Node.js en su computadora.
   
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ó.
   
3. Cree una carpeta vacía en su escritorio y asígnele el nombre "hola".
   
4. Abra VSCode y en el símbolo del sistema, escriba el siguiente código:
   mkdir hello
   cd hello
   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.
   
6. Nombre el nuevo archivo "app.js"
   
7. En el comando de la consola, escriba el siguiente código:
   var msg = 'Hello World';
   console.log(msg);
8. Guarde el archivo presionando "Ctrl + S" en el teclado.
   
9. En una terminal, escriba node app.js. La salida dirá "Hola, mundo".
   

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.
   
2. Aparecerá un menú con tres opciones. A los efectos de esta guía, seleccione la opción "crear un launch.js".
   

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".
   
2. VSCode seleccionará automáticamente el entorno de depuración, pero si no detecta nada, seleccione "Node.js".
   
3. Regrese al Explorador de archivos presionando "Ctrl + Shift + E".
   
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.
   
5. Para verificar los atributos del depurador, presione “Ctrl+Espacio”.
   

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".
   
2. Seleccione "Programa de lanzamiento". Una vez que lo haya seleccionado, presione F5 para iniciar el depurador.
   
3. También puede acceder al menú del depurador accediendo primero a la Paleta de comandos presionando "Ctrl+Shift+P"
   
4. Escriba “ .debug” y seleccione su configuración.
   

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".
   
2. Abra IntelliSense (Mayús+Espacio) para abrir el menú, luego seleccione "Agregar configuración".
   
3. Dentro de la matriz de configuración de IntelliSense, elija agregar otra configuración.
   

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 programador. 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.
   
2. Cuando aparezca el menú, seleccione "Alternar Adjuntar automáticamente". La barra Adjuntar automáticamente debería aparecer en la parte superior.
   
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".

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.
   
2. Seleccione "Adjuntar al proceso de nodo" en el menú.
   
3. Desde aquí, verá todos los procesos que el depurador de Node.js puede depurar. Seleccione a qué proceso desea adjuntar el depurador.
   

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.
   
2. Seleccione "Depurar: Crear terminal de depuración de JavaScript" en el menú.
   
3. También puede acceder a esta opción seleccionándola en el menú desplegable de la terminal.
   
4. El depurador se adjuntará a su proceso actual. Se ejecutará automáticamente y corregirá cualquier error en el código que detecte.
   

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": "Attach to Process",
    "type": "node",
    "request": "attach",
    "port": 9229
   }
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: “ - - inspect =95430”
   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": "Attach to Process",
    "type": "node",
    "request": "attach",
    "processId": "53426"
   }
2. Es bastante tedioso ingresar manualmente cada ID de proceso. Afortunadamente, puede mostrar 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".
   
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.
   
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.