Cuando el depurador de Visual Studio Code no se detiene en los puntos de interrupción, muestra círculos grises, inicia el programa equivocado o no permite inspeccionar variables, el problema suele estar relacionado con la configuración de depuración, el proceso que se está ejecutando, los mapas de origen o el momento en que se carga el código. La comprobación debe comenzar por confirmar que el proyecto se ejecuta realmente y que Visual Studio Code utiliza el depurador y el archivo de lanzamiento adecuados.
Visual Studio Code incluye un depurador integrado que te permite ejecutar tu código paso a paso, inspeccionar variables, establecer puntos de interrupción y analizar la pila de llamadas. La capacidad de depurar directamente dentro de la interfaz de VS Code elimina la necesidad de cambiar a otra herramienta, lo que acelera significativamente el proceso de desarrollo.
Comprobaciones iniciales cuando el depurador no funciona
El debugging, o depuración en español, es el proceso de encontrar y corregir errores o defectos en el código de un programa. Estos errores pueden causar comportamientos inesperados, mal funcionamiento o fallos en el programa. El objetivo del debugging es identificar y corregir estos errores para que el programa funcione según lo previsto.
El proceso de debugging generalmente implica el uso de herramientas y técnicas específicas para rastrear y comprender el flujo de ejecución del programa, así como para inspeccionar y modificar el estado interno del mismo. Básicamente, se trata de un editor de código. Esto quiere decir, una herramienta que nos permite editar el texto plano de los archivos de código para programación.
Así pues, VSCode es una herramienta extremadamente versátil, capaz de facilitar muchas tareas de la programación, llegando (con las correspondientes extensiones) a funcionar casi al nivel de un IDE. VSCode tiene integradas herramientas para depurar el código fuente.
- Abre el proyecto completo en Visual Studio Code y no únicamente un archivo aislado.
- Comprueba que el archivo que vas a ejecutar coincide con el archivo de inicio de la configuración.
- Confirma que el proceso, el lenguaje y el entorno de ejecución seleccionados corresponden al proyecto.
- Inicia la sesión con F5 o desde el panel Ejecutar y depurar.
- Comprueba que el programa llega realmente a la ruta de código donde colocaste el punto de interrupción.
Para abrir el panel de depuración en VSCode, simplemente haz clic en el icono correspondiente en la barra lateral de VSCode, ubicado en el costado de la ventana (tiene forma de bicho). Haz clic en el icono Depurar en la Barra de Actividad para cargar la vista de Depuración.
La opción “Run and Debug” es una opción general que te permite ejecutar y depurar tu código en diferentes lenguajes de programación, incluyendo JavaScript. Esta opción te brinda un archivo de configuración llamado launch.json donde puedes personalizar la forma en que se ejecuta y depura tu código.
Comprobar el archivo launch.json
El corazón de la depuración en VS Code es el archivo launch.json. Presiona F5 en cualquier proyecto de JavaScript y VS Code te pedirá crear uno.
Para comenzar con nuestra depuración, debemos dar clic a la opción debajo el botón “Run and Debug” llamada “create a launch.json file”. Posterior, VSCode nos preguntará el tipo de ambiente a configurar. En este caso debemos seleccionar la opción de Node.js.
Una vez seleccionado nuestro ambiente, VSCode nos generará una configuración básica en formato JSON, la cual podemos modificar posteriormente. Este archivo proporciona información esencial sobre el entorno de ejecución y las opciones de depuración necesarias para VSCode.
También debemos revisar todos los valores generados automáticamente y asegurarnos de que tengan sentido para el proyecto, como por ejemplo el archivo de lanzamiento y tipo de entorno correcto. Debemos recordar que los atributos disponibles en las configuraciones del archivo launch.json pueden ser diferentes según el depurador que estés utilizando.
| Elemento | Función |
|---|---|
| launch.json | Archivo de configuración de ejecución y depuración |
| Node.js | Entorno de ejecución seleccionado para el ejemplo |
| F5 | Inicio de una sesión de depuración |
| sourceMaps | Mapeo del código generado hacia el código fuente original |
Es importante no asumir que un atributo que funciona para un depurador automáticamente funcionará para otros depuradores. Los atributos disponibles en las configuraciones del archivo launch.json pueden ser diferentes según el depurador que estés utilizando.
La opción “Javascript Debug Terminal” es una opción nativa que te permite ejecutar tu código JavaScript en una terminal de depuración específica para este lenguaje. Esta terminal te proporciona un entorno interactivo para ejecutar y depurar tu código fácilmente sin realizar configuraciones previas.
La opción “Debug URL” es una opción que te permite depurar una URL específica en tu proyecto. Esto es útil cuando estás trabajando en una aplicación web y deseas depurar el código que se ejecuta en una página web en particular.
Verificar que el programa se está ejecutando
Para comenzar, necesitas tener instalado Node.js en tu computadora. Para nuestro ejemplo, usaremos el siguiente código inicial de JavaScript. Puedes crear este archivo en el directorio que prefieras. Lo llamaremos index.js.
Este código define una función en JavaScript llamada sumUpToN que suma los números desde 1 hasta un número dado n. Luego, se establece un límite (en este caso, 5) y se llama a la función con ese límite.
El programa imprime mensajes indicando que se están sumando los números y, al final, muestra la suma total de los números desde 1 hasta el límite establecido. Si el depurador no se detiene, comprueba primero que el archivo se ejecuta sin errores fuera de la sesión de depuración.
Una forma sencilla de confirmar que la ruta se alcanza consiste en colocar un punto de interrupción en una instrucción que siempre se ejecute, como una llamada a console.log, el inicio de una función o una línea situada antes de una condición.
La integración del depurador de Node.js en VS Code sobresale en la depuración asíncrona. Establece breakpoints dentro de funciones async, cadenas de Promises o callbacks.
Si los breakpoints no se activan en funciones asíncronas, asegúrate de que tu código asíncrono realmente se ejecute y llegue a la línea del breakpoint. A veces los breakpoints necesitan establecerse después de que el depurador inicie para módulos cargados dinámicamente.
Puntos de interrupción: estados y significado
Los puntos de interrupción son la característica más básica y esencial de la depuración confiable. Un punto de interrupción indica dónde debe suspender Visual Studio el código en ejecución para que pueda echar un vistazo a los valores de las variables, o el comportamiento de la memoria, o si se ejecuta una rama de código.
Los puntos de ruptura son una de las técnicas principales de depuración. Establecer puntos en el código permite que la ejecución del programa se detenga, permitiendo a los desarrolladores examinar el estado del programa en ese momento y analizar variables.
Para establecer un punto de interrupción en VSCode, simplemente puede hacer clic en el margen izquierdo del editor, junto al número de línea donde desea pausar. Verá un punto rojo que indica el punto de interrupción.
También puede hacer clic derecho en la línea y seleccionar "Alternar punto de interrupción" en el menú contextual. Para deshabilitar o eliminar un punto de interrupción, puede hacer clic en el punto rojo nuevamente, o hacer clic derecho y seleccionar "Eliminar punto de interrupción" o "Deshabilitar punto de interrupción".
Al depurar, un punto de interrupción tiene dos estados visuales posibles: Un círculo rojo sólido, si el depurador ha establecido correctamente un punto de interrupción en el proceso de destino. Un círculo hueco (gris oscuro o blanco relleno, dependiendo del tema), si el punto de interrupción está deshabilitado o se produce una advertencia al intentar establecer el punto de interrupción.
Para determinar la diferencia, mantenga el puntero sobre el punto de interrupción y compruebe si hay una advertencia. En el panel de depuración también encontrarás detalles sobre puntos de interrupción y eventos.
El punto de interrupción aparece vacío o no se activa
Un círculo hueco normalmente indica que el depurador no ha podido asociar el punto de interrupción con código ejecutable. La causa puede ser que el archivo no se ha cargado, que el proceso elegido no es correcto, que el código ejecutado es diferente al que aparece en el editor o que faltan mapas de origen.
Si el punto de interrupción se establece correctamente, pero no se alcanza, confirma que el código se está ejecutando y que la sesión de depuración está asociada al proceso adecuado. Si el código se ejecuta en más de un proceso o en más de un equipo, asegúrate de que depuras el proceso o equipo correcto.
Confirma que el código se está ejecutando. Para probar que el código se está ejecutando, agrega una llamada a System.Diagnostics.Debugger.Break (C#/VB) o __debugbreak (C++) a la línea de código en la que está intentando establecer el punto de interrupción y, después, recompile el proyecto.
En JavaScript, coloca temporalmente un console.log antes del punto de interrupción o ejecuta el archivo desde JavaScript Debug Terminal para comprobar que la ruta se alcanza.
El código fuente no coincide con el código ejecutado
Si un archivo de código fuente ha cambiado y el origen ya no coincide con el código que se está depurando, el depurador no establecerá puntos de interrupción en el código de forma predeterminada.
Normalmente, este problema se produce cuando se cambia un archivo de código fuente, sin que se haya recompilado el código fuente. Para corregir este problema, recompile el proyecto.
Si el sistema de compilación considera que el proyecto ya está actualizado aunque no lo esté, puede forzar la recompilación del sistema del proyecto. Para recompilar el proyecto, puede guardar de nuevo el archivo de código fuente o limpiar la salida de compilación antes de compilar.
En proyectos JavaScript, React o TypeScript, elimina o regenera la salida compilada cuando sospeches que el navegador está ejecutando una versión antigua del archivo. Después, reinicia el servidor de desarrollo y vuelve a iniciar la sesión de depuración.
Source maps incorrectos o ausentes
¿Puedo depurar código JavaScript minificado en VS Code? Sí, si los source maps están disponibles. Establece sourceMaps en true en tu configuración de launch.json y asegúrate de que tu proceso de compilación genere archivos de source map.
VS Code mapeará automáticamente el código minificado de vuelta a tu código fuente original. Verifica que los source maps estén configurados correctamente para código transpilado.
Si el punto de interrupción aparece en una línea distinta, no se activa o se desplaza a otro archivo, comprueba que el archivo .map corresponda exactamente a la versión del código que está cargada en el navegador o en Node.js.
Revisa también las rutas de sourceMapPathOverrides cuando el empaquetador utiliza rutas virtuales, como webpack:///. Un mapeo incorrecto puede hacer que el depurador no encuentre el archivo fuente aunque el archivo JavaScript se esté ejecutando correctamente.
Configurar puntos de interrupción correctamente
Luego de configurar nuestro archivo launch.json, vamos a colocar puntos de interrupción en nuestro código. En este caso, agregaremos 3 puntos de interrupción, uno en cada instrucción console.log.
Los puntos de interrupción son marcados con un círculo rojo al principio de una línea de código. Puedes añadir o quitar estos puntos de interrupción con solo hacer clic en el lado izquierdo del número de la línea de código.
Para usar puntos de interrupción en VSCode, debe iniciar una sesión de depuración. Puede hacerlo haciendo clic en el botón Ejecutar y depurar en la barra lateral izquierda o presionando F5.
También puede seleccionar una configuración específica en el menú desplegable o crear su propio archivo launch.json para personalizar la configuración de depuración.
Una vez que comience la depuración, el código se ejecutará hasta que alcance un punto de interrupción o hasta que lo pause manualmente. A continuación, puede utilizar la barra de herramientas Depurar o los métodos abreviados de teclado para pasar por encima, entrar, salir o continuar la ejecución.
Breakpoints condicionales y logpoints
Haz clic derecho en cualquier breakpoint y selecciona “Edit Breakpoint” para añadir condiciones. Los breakpoints condicionales permiten detener la ejecución únicamente cuando se cumple una condición determinada.
Los logpoints imprimen en la Consola de Depuración sin detener la ejecución. Haz clic derecho en el margen y selecciona “Add Logpoint”.
Los breakpoints condicionales y logpoints reducen el ruido de depuración. Esto resulta especialmente útil cuando una línea se ejecuta muchas veces o cuando solo necesitas observar un caso concreto sin interrumpir por completo la ejecución.
Para administrar todos los puntos de interrupción, puede abrir el panel Puntos de interrupción desde la vista Depurar en la barra lateral izquierda. Comprueba allí si el punto está deshabilitado, tiene una condición inesperada o se ha configurado para otro archivo.
El punto de interrupción está activo, pero no se alcanza
Si el punto de interrupción está activo y no se alcanza, comprueba que el flujo de ejecución pasa por esa línea. Una condición, una ruta alternativa, un retorno anticipado o un error anterior pueden impedir que el programa llegue al punto.
Si está depurando código optimizado, asegúrese de que la función en la que se establece el punto de interrupción no se inserta en otra función. La prueba de Debugger.Break descrita en la comprobación anterior también puede funcionar para probar este problema.
Para asociar a escenarios de proceso, asegúrese de depurar el tipo correcto de código (por ejemplo, código de script frente a .NET Framework frente a .NET 5+). En VS Code, revisa que la configuración utilice el tipo de depurador que corresponde al proceso.
Si trabajas con varios procesos, servidores o ventanas del navegador, comprueba que la sesión está conectada a la instancia que realmente atiende la solicitud. Un punto de interrupción puede parecer ignorado cuando el código se ejecuta en otro proceso.
Revisar el flujo de ejecución paso a paso
Justo después de iniciar la sesión de depuración, el panel principal te mostrará información sobre el proceso en ejecución. A su vez, la barra de estado cambiará de color y los paneles del lado izquierdo se llenarán con detalles sobre variables y estados actuales.
Como primera instancia, el depurador se detendrá en el primer punto de ruptura configurado. A su vez gracias a la barra de control de depuración podemos ir línea por línea inspeccionando nuestro código.
La barra de control de depuración en VSCode es una interfaz gráfica que te permite controlar y monitorear el proceso de depuración de tu programa. Esta barra se encuentra generalmente en la parte superior del editor y se activa cuando estás en modo de depuración.
- Play/Continue: Este botón permite que el programa continúe su ejecución después de haber sido pausado durante la depuración.
- Step Over: Este botón permite avanzar la ejecución del programa línea por línea, pero sin entrar en el código de las funciones que se llaman.
- Step Into: Si la línea actual de código contiene una llamada a una función, “Step Into” entra en el cuerpo de esa función y se detiene en la primera línea de código de esa función.
- Step Out: Este botón se utiliza para avanzar en la ejecución del programa hasta que la función actual en la que te encuentras retorna.
- Restart: Reinicia la sesión de depuración desde el principio.
- Stop All: Detiene todas las sesiones de depuración activas.
Si el código marcado es una llamada de método, puede entrar en él presionando F11. También puede pasar por encima de la línea de código presionando F10.
En lugar de console.logs dispersos, obtienes una vista completa del estado de tu aplicación en cualquier momento. Si el programa alcanza una línea que contiene una llamada a una función, el comando “Step Over” ejecutará toda la función actual y detendrá la ejecución en la siguiente línea después de la llamada a la función.
Inspeccionar variables, expresiones y la pila de llamadas
La sección de variables en la vista de depuración muestra una lista de las variables del programa y sus valores mientras lo estás depurando. Puedes ver qué variables están siendo utilizadas y qué valores tienen.
El panel Variables muestra todas las variables locales y globales en el ámbito actual. Además, en algunos casos, puedes incluso cambiar estos valores directamente, y ver cómo afecta eso al programa en ejecución.
La función “Watch” en la barra de depuración de VSCode te permite monitorear y evaluar el valor de expresiones o variables específicas en tiempo real mientras depuras tu programa.
Puedes agregar expresiones al “Watch” para seguir su evolución durante la ejecución del código, proporcionando una herramienta útil para examinar y comprender el estado de variables clave sin interrumpir el flujo normal de la depuración.
La sección “Call Stack” (pila de llamadas) en un debugger de VSCode muestra la secuencia de funciones que están siendo ejecutadas en un programa en un momento específico durante la depuración.
La pila de llamadas ayuda a comprender qué funciones llevaron al programa hasta la línea en la que se detuvo. Cada vez que una función es llamada, se agrega a la parte superior de la pila de llamadas, y cuando una función completa su ejecución, se elimina de la parte superior.
La Consola de Depuración no es solo para salida-es un REPL conectado a tu contexto de ejecución pausado. Desde este contexto puedes examinar expresiones relacionadas con el estado actual de la aplicación mientras la ejecución está detenida.
Para usar expresiones de inspección en VSCode, debe tener una sesión de depuración en ejecución. Las expresiones del reloj se evaluarán y actualizarán cada vez que la ejecución se detenga o se mueva.
Puede ver el valor y el tipo de cada expresión en el panel Inspección o pasar el cursor sobre ellas para ver más detalles. También puede expandir o contraer cualquier expresión compleja o anidada para ver sus propiedades y valores.
Revisar excepciones y errores en tiempo de ejecución
Si el programa se detiene antes del punto de interrupción, es posible que se haya producido una excepción. Cuando se produce un error durante la depuración, inspecciona el mensaje, la pila de llamadas y la línea que provocó la excepción.
Si se produce un error en el programa durante la depuración, pero no tiene un controlador de excepciones para él, el depurador se interrumpe en el punto de la excepción.
Cuando se produce un error, puede inspeccionar el estado actual del programa, incluida la pila de llamadas. Sin embargo, si intenta recorrer el código, el proceso de depuración continúa para lanzar la excepción hasta que se controla o hasta que el programa se cierra.
En JavaScript y Node.js, revisa la Consola de depuración y la terminal integrada para localizar errores de importación, rutas incorrectas, excepciones no controladas y fallos de inicialización.
Depurar aplicaciones React
Para aplicaciones React, utiliza el JavaScript Debugger integrado de VS Code (la extensión Debugger for Chrome ahora está obsoleta). Inicia tu servidor de desarrollo (npm start), luego presiona F5.
VS Code lanza Chrome y conecta el depurador. Coloca breakpoints dentro de hooks useEffect, manejadores de eventos o funciones de componentes.
El panel Variables muestra los valores actuales de props, state y dependencias de hooks. Habilita Auto Attach desde la Paleta de Comandos (Ctrl+Shift+P > “Toggle Auto Attach”).
Configúralo en modo “smart”. La integración con el navegador trae la depuración frontend a tu editor.
Depurar frontend y backend simultáneamente
¿Puedo depurar frontend y backend simultáneamente en VS Code? Sí, crea una configuración compuesta en launch.json que lance múltiples sesiones de depuración.
Esto te permite depurar tu frontend React y backend Node.js en paralelo, avanzando por operaciones full-stack sin problemas.
Si una parte de la aplicación se detiene y la otra no, confirma que ambas sesiones están iniciadas y que cada una apunta al proceso correcto. También comprueba que los puertos, las rutas de origen y las configuraciones de lanzamiento no se solapen.
Problemas específicos de SharePoint Framework
Visual Studio Code es un editor de código popular que suele utilizarse para crear soluciones de SharePoint Framework. Al configurar la depuración de la solución de SharePoint Framework en Visual Studio Code, puede recorrer el código y corregir los errores más eficazmente.
La manera más fácil de configurar Visual Studio Code (VS Code) para depurar soluciones de SharePoint Framework es mediante el depurador de JavaScript incluido en VS Code para depurar Chrome & Edge. También se necesita Google Chrome o Microsoft Edge.
Puede ubicar las configuraciones de depuración en el archivo ./vscode/launch.json en la carpeta del área de trabajo de Visual Studio Code. En Visual Studio Code, abra el archivo de código fuente del elemento web principal y agregue un punto de interrupción en la primera línea del método render(), ya sea seleccionando el margen a la izquierda del número de línea o resaltando la línea de código en el editor y presionando la tecla F9.
En Visual Studio Code, en el menú Ver, seleccione la opción Terminal integrado o seleccione Ctrl+` en el teclado. En el terminal, ejecute el siguiente comando: gulp serve --nobrowser
Al ejecutar este comando, se compila la solución de SharePoint Framework e inicia el servidor web local para atender los archivos de salida. Dado que el depurador inicia su propia instancia del explorador, use el argumento --nobrowser para evitar que la tarea de servicio abra una ventana del explorador.
Una vez finalizada la tarea gulp, pase al área de código de Visual Studio Code y seleccione F5 (o, en el menú Depuración, seleccione la opción Iniciar depuración).
Se inicia el modo de depuración en Visual Studio Code, que cambia el color de la barra de estado a naranja y abre una ventana nueva de Google Chrome que muestra el área de trabajo de SharePoint.
En este momento, el punto de interrupción está deshabilitado porque aún no se ha cargado el código del elemento web. SharePoint Framework carga elementos web a petición solo después de que se hayan agregado a la página.
Para comprobar que la depuración funciona, en el área de trabajo, agregue el elemento web al lienzo. Tenga en cuenta que, con el código cargado en la página, el indicador de punto de interrupción cambia a activo.
Si ahora vuelve a cargar la página, se alcanza el punto de interrupción en Visual Studio Code, de forma que puede inspeccionar todas las propiedades y recorrer el código.
⏯ Depurar en Visual Studio Code | VSCode Debug Javascript
Depurar SharePoint Workbench hospedado
Cuando compile soluciones de SharePoint Framework que se comuniquen con SharePoint, querrá comprobar la interacción entre la solución y SharePoint. Para hacerlo fácilmente, puede utilizar la versión hospedada del SharePoint Workbench, que está disponible para los espacios empresariales de Microsoft 365.
Al compilar soluciones de SharePoint Framework, realizará pruebas regularmente, por lo que es conveniente crear una configuración de depuración independiente para la versión hospedada del SharePoint Workbench.
Abra .vscode/launch.json y actualice la propiedad url en la configuración de área de trabajo alojada en la URL de su sitio de SharePoint.
En Visual Studio Code, active el panel Depuración y, en la lista Configuraciones, seleccione la configuración Hosted workbench (Área de trabajo hospedada) que acaba de agregar.
Inicie la depuración; para ello, presione F5 o seleccione la opción Iniciar depuración en el menú Depuración. Visual Studio Code cambia al modo de depuración, indicado por la barra de estado naranja, y la extensión Debugger for Chrome abre una nueva instancia de Google Chrome con la página de inicio de sesión de Microsoft 365.
Después de iniciar sesión, agregue el elemento web al lienzo y actualice el área de trabajo. Verá que se alcanza el punto de interrupción de Visual Studio Code y puede inspeccionar las variables y recorrer el código.
Depurar extensiones de SharePoint
La depuración de una extensión en un área de trabajo hospedada es similar a la de un elemento web con algunas diferencias principales. Abra .vscode/launch.json y actualice la propiedad url en la configuración de área de trabajo alojada en la URL de su sitio de SharePoint.
En Visual Studio Code, active el panel Depuración y, en la lista Configuraciones, seleccione la configuración Hosted workbench (Área de trabajo hospedada) que acaba de agregar.
Después de iniciar el gulp serve en el Terminal, inicie la depuración; para ello, seleccione F5 o seleccione la opción Iniciar depuración en el menú Depuración.
En la pestaña de trabajo que se abrió en el explorador vaya a una página de SharePoint Online para probar la extensión. Anexe los siguientes parámetros de cadena de consulta a la dirección URL.
Necesita actualizar el id. para que coincida con su propio identificador de extensión. Está disponible en el archivo HelloWorldApplicationCustomizer.manifest.json.
loadSPFX=true: garantiza que SharePoint Framework se carga en la página. Por motivos de rendimiento, el marco no carga salvo que se haya registrado al menos una extensión.
debugManifestsFile: especifica que quiere cargar componentes de SPFx que se entregan localmente. El cargador solo busca componentes en el catálogo de aplicaciones (para la solución implementada) y en el servidor del manifiesto de SharePoint (para las bibliotecas del sistema).
customActions: simula una acción personalizada. Al implementar y registrar este componente en un sitio, creará este objeto CustomAction y describirá las diferentes propiedades que puede establecer en él.
Seleccione Cargar scripts de depuración para seguir cargando scripts del host local. Cuando se cargue la página, debería ver la extensión en la página.
Además ahora puede alternar puntos de interrupción y recorrer el código.
Depurar con Chrome o Microsoft Edge
Si usa una versión anterior del generador de Yeoman de SharePoint Framework o quiere depurar usando Microsoft Edge, siga estos pasos para crear el archivo launch.json de forma manual.
Para que pueda depurar con Microsoft Edge, deberá instalar la Actualización de abril de 2018 de Windows 10 que incluye el Protocolo de DevTools de Microsoft Edge.
Para Microsoft Edge, copie la configuración de depuración existente y use la dirección URL del área de trabajo hospedada. Para Chrome, copie la configuración de depuración existente y use la dirección URL del área de trabajo hospedada.
Comprueba también que el navegador que lanza la configuración es el mismo navegador que contiene la aplicación que estás probando. Una sesión conectada a otra ventana no recibirá los puntos de interrupción del proceso que esperas.
Cuando el depurador inicia el programa equivocado
Si F5 inicia otro archivo, otro entorno o una versión distinta del proyecto, revisa la configuración activa en el selector del panel Ejecutar y depurar. Comprueba que la propiedad de lanzamiento apunta al archivo correcto.
Debemos recordar que los atributos disponibles en las configuraciones del archivo launch.json pueden ser diferentes según el depurador que estés utilizando. También debemos revisar todos los valores generados automáticamente y asegurarnos de que tengan sentido para el proyecto, como por ejemplo el archivo de lanzamiento y tipo de entorno correcto.
La opción “Run and Debug” te brinda un archivo de configuración llamado launch.json donde puedes personalizar la forma en que se ejecuta y depura tu código. En este archivo de configuración, puedes establecer diferentes configuraciones de ejecución, como el tipo de archivo que deseas ejecutar, los argumentos de línea de comandos, los puntos de interrupción, entre otros.
Reiniciar la sesión y limpiar procesos anteriores
Reinicia la sesión de depuración desde el principio. Detiene todas las sesiones de depuración activas.
Si el servidor de desarrollo o el proceso de Node.js conserva una versión anterior del código, detén la sesión, cierra el proceso que continúa ejecutándose, vuelve a iniciar el servidor y después presiona F5.
Si el navegador conserva una página antigua, vuelve a cargarla después de que el depurador se haya conectado. En aplicaciones web, el código puede cargarse a petición, por lo que el punto de interrupción puede permanecer inactivo hasta que se abre la ruta o se agrega el componente correspondiente.
Qué hacer cuando se eliminó un punto de interrupción, pero sigue alcanzándose
Si eliminó un punto de interrupción durante la depuración, puede alcanzarse de nuevo la próxima vez que se inicia la depuración. Para dejar de encontrar este punto de interrupción, asegúrese de que todas las instancias del punto de interrupción se quitan de la ventana Puntos de interrupción.
En VS Code, abre el panel de puntos de interrupción y elimina las entradas restantes. Un punto puede aparecer en varios archivos, configuraciones o sesiones, por lo que quitar únicamente el marcador visible no siempre elimina todas sus instancias.
Qué revisar si la ejecución se detiene demasiado pronto
Si el depurador se detiene al iniciar, revisa los puntos de interrupción de excepción y los puntos de interrupción establecidos en código de inicialización. Una excepción durante la carga de un módulo puede impedir que el programa llegue al punto que quieres investigar.
El panel Variables muestra todas las variables locales y globales en el ámbito actual. La pila de llamadas ayuda a comprender qué funciones llevaron al programa hasta la línea en la que se detuvo.
Si la excepción está controlada y no quieres que la sesión se detenga en ella, modifica la configuración correspondiente del depurador. Si necesitas localizar el origen exacto, mantén activa la interrupción en excepciones y examina la primera entrada relevante de la pila de llamadas.
Comprobar extensiones y compatibilidad
Para aplicaciones React, utiliza el JavaScript Debugger integrado de VS Code (la extensión Debugger for Chrome ahora está obsoleta). Si una configuración antigua depende de una extensión obsoleta, actualiza la configuración para utilizar el depurador integrado.
VSCode tiene integradas herramientas para depurar el código fuente. Así pues, VSCode es una herramienta extremadamente versátil, capaz de facilitar muchas tareas de la programación, llegando (con las correspondientes extensiones) a funcionar casi al nivel de un IDE.
Comprueba que la extensión o el depurador seleccionado admite el lenguaje, el entorno y el navegador del proyecto. No asumas que un atributo que funciona para un depurador automáticamente funcionará para otros depuradores.
Depuración de proyectos Python en Visual Studio Code
Visual Studio proporciona una experiencia de depuración completa para Python. En el depurador, puede inspeccionar variables locales, usar puntos de interrupción, introducir/salir/omitir instrucciones, Definir instrucción siguiente, etc.
Para iniciar una sesión de depuración, seleccione Depurar>Iniciar depuración o use el método abreviado de teclado F5. Para un proyecto, estas acciones inician el archivo de inicio con el entorno activo del proyecto y cualquier argumento de línea de comandos o rutas de búsqueda especificadas para Propiedades del proyecto.
Si desea controlar el entorno y los argumentos de Python, cree primero un proyecto para el código. Sin embargo, no necesita un archivo de proyecto o solución en Visual Studio para depurar el código de Python.
Para depurar código en un archivo de Python independiente, abra el archivo en Visual Studio y seleccione Depurar>Iniciar depuración. Visual Studio inicia el script con el entorno predeterminado global y sin argumentos.
Si usa un archivo de proyecto, el depurador siempre comienza con el entorno de Python activo para el proyecto. Puede cambiar el entorno activo actual.
Si va a depurar un archivo de código de Python independiente, Visual Studio inicia el script con el entorno predeterminado global y sin argumentos.
Puntos de interrupción en Python
Los puntos de interrupción detienen la ejecución del código en un punto marcado para poder inspeccionar el estado del programa. Algunos puntos de interrupción de Python pueden resultar sorprendentes para aquellos desarrolladores que hayan trabajado con otros lenguajes de programación.
En Python, todo el archivo es código ejecutable, por lo que Python ejecuta el archivo cuando se carga para procesar cualquier definición de función o clase de nivel superior. Si se ha establecido un punto de interrupción, puede observar que el depurador se interrumpe parcialmente a través de una declaración de clase.
Este comportamiento es correcto, aunque a veces es sorprendente. Para establecer un punto de interrupción, seleccione en el margen izquierdo del editor de código o haga clic con el botón derecho en una línea de código y seleccione Punto de interrupción>Insertar punto de interrupción.
Para quitar un punto de interrupción, seleccione el punto rojo o haga clic con el botón derecho en la línea de código y seleccione punto de interrupción>Eliminar punto de interrupción. También puede deshabilitar un punto de interrupción seleccionando el punto rojo y seleccionando Punto de interrupción>Deshabilitar punto de interrupción.
Condiciones y acciones de puntos de interrupción
Puede personalizar las condiciones en las que se desencadena un punto de interrupción, como la interrupción solo cuando una variable se establece en un determinado valor o intervalo de valores.
Para establecer condiciones, haga clic con el botón derecho en el punto rojo del punto de interrupción y seleccione Condiciones. Se abre el cuadro de diálogo Configuración de punto de interrupción.
También tiene las opciones para definir Acciones para un punto de interrupción. Puede crear un mensaje para iniciar sesión en la ventana Salida y, opcionalmente, especificar para continuar la ejecución automáticamente.
Al registrar un mensaje se crea un punto de seguimiento que no agrega código de registro directamente a la aplicación. En función de cómo configure las condiciones y acciones de un punto de interrupción, el icono rojo del margen izquierdo cambia para indicar la configuración.
Inspección y modificación de valores
Al detener la ejecución de código en el depurador, puede inspeccionar y modificar los valores de las variables. También puede usar la ventana Inspección para supervisar variables individuales y expresiones personalizadas.
Para ver un valor utilizando la función DataTips durante la depuración, pase el ratón sobre cualquier variable en el editor. Puede seleccionar el valor de la variable para cambiarlo.
La ventana Inspección permite escribir expresiones arbitrarias de Python y ver los resultados. Las expresiones se vuelven a evaluar para cada paso.
Para inspeccionar un valor de cadena, seleccione Ver (lupa) en el lado derecho de la entrada Valor. Los tipos str, unicode, bytesy bytearray están disponibles para su inspección.
Diagnóstico sistemático
- Confirma que el proyecto se ejecuta y que el proceso permanece activo.
- Selecciona el depurador que corresponde al lenguaje y al entorno.
- Revisa la configuración activa de launch.json.
- Coloca un punto de interrupción en una línea que se ejecute con seguridad.
- Inicia la depuración con F5 y comprueba si el círculo cambia a rojo sólido.
- Si el punto permanece hueco, revisa los source maps, las rutas y la versión del código.
- Si el punto está activo pero no se alcanza, comprueba el flujo, las condiciones y el proceso.
- Si la sesión se detiene antes, examina la excepción y la pila de llamadas.
- Reinicia el servidor de desarrollo y la sesión de depuración después de cambiar la configuración.
- Comprueba los puntos de interrupción almacenados en el panel correspondiente.
Las pruebas unitarias son la primera línea de defensa contra errores de código porque, cuando se realiza correctamente, prueban una sola "unidad" de código, normalmente una sola función y son más fáciles de depurar que el programa completo.
Vuelva a ejecutar pruebas unitarias cuando realice cambios para probar que el código sigue funcionando correctamente. Las pruebas unitarias ayudan a separar un error de una función concreta de un problema general de configuración de la sesión de depuración.
La depuración de código es un paso crucial para encontrar y corregir errores. La información se presenta de manera clara y organizada, permitiéndote identificar la raíz del problema de forma más rápida.
tags: #el #depurador #de #vs #code #no
Publicaciones populares:
- Componentes clave de un sistema de sales en depuradoras
- Purificación de Young Living en casa: beneficios, composición y recetas prácticas
- Legado de la filtración maya en la pureza del agua
- ventajas de los botellones de agua purificada
- Cómo potabilizar agua producida por desalación