Para quitar una expresión vigilada del depurador de Visual Studio, abre la ventana Inspección o Watch, selecciona la expresión que ya no necesitas y elimínala con la tecla Supr o mediante la opción correspondiente del menú contextual. Si quieres borrar todas las expresiones vigiladas, selecciona todas las entradas y elimínalas juntas.
Las expresiones vigiladas permiten rastrear valores específicos durante la depuración, pero pueden dejar de ser útiles cuando cambia el contexto del código, cuando finaliza una investigación o cuando quieres limpiar la sesión de depuración. El depurador integrado de Visual Studio permite inspeccionar variables, evaluar expresiones y controlar distintos aspectos de la ejecución desde sus ventanas y opciones de configuración.
Cómo eliminar una expresión vigilada
Inicia una sesión de depuración y abre la ventana Inspección desde el área de depuración de Visual Studio. El panel Watch te permite rastrear expresiones específicas.
Localiza la expresión que quieres quitar, selecciónala y presiona la tecla Supr. También puedes hacer clic con el botón derecho sobre la expresión y utilizar la orden para eliminarla.
Si necesitas quitar varias expresiones vigiladas, selecciónalas manteniendo presionada la tecla Ctrl o usa la selección múltiple disponible en la ventana, y después elimínalas al mismo tiempo. Para limpiar por completo la lista, selecciona todas las entradas y presiona Supr.
Qué son las expresiones vigiladas
Las expresiones vigiladas son valores o expresiones que el depurador evalúa mientras el programa está detenido en un punto de interrupción. El panel Watch te permite rastrear expresiones específicas.
La Consola de Depuración no es solo para salida-es un REPL conectado a tu contexto de ejecución pausado. Prueba correcciones, inspecciona objetos o llama funciones directamente:
// Mientras está pausado en un breakpoint:
// > user.permissions
// ['read', 'write']
// > calculateTotal(cart.items)
// 45.99
El panel Variables muestra todas las variables locales y globales en el ámbito actual. El panel Watch te permite rastrear expresiones específicas. El Call Stack (pila de llamadas) muestra tu ruta de ejecución-invaluable para entender cómo llegaste a un punto particular.
Cómo abrir las herramientas de depuración
En Visual Studio, puede especificar varias opciones de configuración para el comportamiento del depurador, incluido cómo se muestran las variables, si se presentan determinadas advertencias, cómo se establecen los puntos de interrupción y cómo afecta la interrupción a los programas en ejecución.
Especifique la configuración del depurador en el menú Opciones de herramientas>. Puede restaurar todas las opciones predeterminadas con Herramientas > importar y exportar configuración > Restablecer todas las opciones.
Para restablecer un subconjunto de opciones de configuración, guarde la configuración con el Asistente para importación y exportación de antes de realizar los cambios que desea probar y, después, importe la configuración guardada.
Configuración general del depurador
Abra el panel Herramientas>Opciones y expanda la sección Toda la configuración>Depuración. Abra el cuadro de diálogo Opciones de herramientas> y expanda la sección Depuración.
Seleccione la categoría de opciones de depuración que desea configurar, como General, Ventana de salida, Símbolos, etc. Las opciones más comunes se encuentran en la categoría General .
Seleccione o desactive la opción o opciones deseadas. Según sea necesario, seleccione Aceptar para aplicar los cambios. Puede presionar F1 para obtener ayuda sobre las opciones.
Opciones relacionadas con puntos de interrupción
Preguntar antes de eliminar todos los puntos de interrupción: requiere confirmación antes de completar el comando Eliminar todos los puntos de interrupción.
Habilitar filtros de punto de interrupción: permite establecer filtros en puntos de interrupción para que solo afecten a procesos, subprocesos o equipos específicos.
Interrumpir todos los procesos cuando un proceso se interrumpe: interrumpe simultáneamente todos los procesos a los que está asociado el depurador, cuando se produce una interrupción.
Opciones para controlar el código visible
Habilitar Solo Mi Código: El depurador solo muestra e ingresa al código de usuario ("Mi Código"), ignorando el código del sistema y otro código optimizado, o que no tiene símbolos de depuración.
Advertir si no hay ningún código de usuario al iniciar (solo administrado): cuando la depuración comienza con Solo mi código habilitado, esta opción le advierte si no hay ningún código de usuario ("Mi código").
Omitir propiedades y operadores (solo administrado): impide que el depurador entre en propiedades y operadores en código administrado.
Mostrar estructura sin procesar de objetos en las ventanas de variables: Desactiva todas las personalizaciones de la vista de estructura de objetos.
Evaluación de expresiones
Habilitar la evaluación de propiedades y otras llamadas a funciones implícitas: activa la evaluación automática de propiedades y llamadas a funciones implícitas en las ventanas de variables y el cuadro de diálogo Inspección rápida.
Habilitar la evaluación rápida de expresiones (solo administradas): permite al depurador intentar una evaluación más rápida simulando la ejecución de propiedades y métodos simples.
Llame a la función de conversión de cadenas en objetos en las ventanas de variables de Windows: Ejecuta una llamada implícita de conversión de cadenas al evaluar objetos en las ventanas de variables. El resultado se muestra como una cadena en lugar del nombre de tipo.
Solo se aplica mientras se lleva a cabo la depuración en código C#. Este valor se puede invalidar mediante el atributo DebuggerDisplay (consulte Uso del atributo DebuggerDisplay).
Cómo quitar expresiones durante una sesión de depuración
Cuando el programa está detenido, la ventana de Inspección muestra las expresiones que has añadido para observarlas. Puedes seleccionar una entrada individual y quitarla sin modificar el código de la aplicación.
Los logpoints imprimen en la Consola de Depuración sin detener la ejecución. Haz clic derecho en el margen y selecciona “Add Logpoint”. Usa llaves para expresiones:
User {user.name} triggered action at {new Date().toISOString()}
No más eliminación de console.logs antes de hacer commit-los logpoints existen solo durante tu sesión de depuración.
Los logpoints no son expresiones vigiladas, pero pueden cumplir una función parecida cuando necesitas observar un valor sin detener la ejecución. Si ya no los necesitas, también puedes quitarlos desde el margen del editor mediante el menú contextual.
Controles esenciales de depuración
Una vez configurado, la depuración se vuelve sencilla:
Establece breakpoints haciendo clic a la izquierda de cualquier número de línea (o presiona F9)
Inicia la depuración con F5
Step over (saltar) código con F10 (ejecuta la línea actual)
Step into (entrar en) funciones con F11 (profundiza en llamadas a funciones)
Step out (salir) con Shift+F11 (completa la función actual)
El depurador solo se detiene cuando tu condición se evalúa como verdadera:
// Condición del breakpoint: user.role === 'admin'
// Solo se detiene para usuarios administradores
Depuración de JavaScript y TypeScript en VS Code
Todo desarrollador de JavaScript comienza con console.log(). Es rápido, funciona y resulta familiar. Pero cuando estás rastreando un bug a través de múltiples llamadas a funciones, operaciones asíncronas o cambios complejos de estado, el registro por consola se convierte en un juego del gato y el ratón.
Terminas llenando tu código de sentencias de log, reconstruyendo constantemente y aún así perdiendo la imagen completa. El depurador integrado de VS Code cambia esto.
En lugar de adivinar qué está haciendo tu código, puedes pausar la ejecución, inspeccionar variables en cualquier punto, avanzar por las funciones línea por línea y comprender exactamente cómo se comporta tu aplicación.
Creación de tu configuración 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.
Aquí tienes una configuración básica para depurar JavaScript en VS Code:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug Current File",
"program": "${file}",
"skipFiles": ["<node_internals>/**"]
}
]
}
Para TypeScript, añade soporte de source maps a tu configuración:
{
"type": "node",
"request": "launch",
"name": "Debug TypeScript",
"program": "${file}",
"outFiles": ["${workspaceFolder}/dist/**/*.js"],
"sourceMaps": true,
"skipFiles": ["<node_internals>/**"]
}
Cómo evitar que el depurador entre en código innecesario
Añade esto a tu launch.json para omitir código de bibliotecas:
"skipFiles": [
"<node_internals>/**",
"node_modules/**"
]
El depurador no entrará en estos archivos, manteniéndote enfocado en la lógica de tu aplicación.
Depuración en Chrome DevTools
Google Chrome es uno de los navegadores más populares con un motor JavaScript incorporado llamado V8, y ofrece un gran conjunto de herramientas para desarrolladores llamado Chrome DevTools.
Se recomienda encarecidamente visitar su Guía completa de depuración de JavaScript.
Lanzamiento de Chrome DevTools
Presiona F12
Alternativamente, puedes presionar en Windows Ctrl + Shift + I y Linux or Mac Cmd + Shift + I
Si te encanta tu ratón, ve a Menú > Más herramientas > Herramientas del desarrollador.
La pestaña Sources(fuentes), se puede utilizar para visualizar todos los scripts que se encuentran en la página web que estás visitando. Esta pestaña tiene secciones para la ventana de código, árbol de archivos, pila de llamadas y ventanas de observación, etc.
La pestaña Console es donde va toda la salida del registro. Además, puedes utilizar el indicador de la pestaña de la consola para ejecutar código JavaScript.
Es una especie de sinónimo del prompt de comandos en Windows o terminal en Linux. Consejo: alterna la consola en cualquier momento en DevTools usando la tecla Esc.
Uso de Source Maps
Una de las funciones más interesantes que te encantará es la depuración de Dynamic Script, sobre la marcha, a través de Source Maps.
Cada script se puede visualizar en la pestaña Sources de DevTools. La pestaña Sources tiene todos los archivos fuente JavaScript.
Pero el código del editor de código se ejecuta a través de eval() en un contenedor llamado simplemente máquina virtual (VM, virtual machine) dentro del proceso del navegador.
Como ya habrás adivinado, nuestro código es en realidad un script que no tiene un nombre de archivo. No vemos eso en la pestaña Sources.
Debemos aprovechar Source Maps para asignar un nombre al JavaScript de nuestro editor. Es bastante simple:
Digamos que estamos en el desafío Factorialize, y tu código se ve así:
function factorialize(num) { if(num <= 1){ . } factorialize(5);
Todo lo que tenemos que hacer es agregar // # sourceURL = factorialize.js en la parte superior del código, es decir, la primera línea:
//# sourceURL=factorialize.js function factorialize(num) { if(num <= 1){ .
¡Y Eureka! ¡Eso es! Ahora abre DevTools y busca el nombre del archivo. Agrega puntos de interrupción, depura y disfruta!
Depuración de React con integración de navegador
Para aplicaciones React, utiliza el JavaScript Debugger integrado de VS Code (la extensión Debugger for Chrome ahora está obsoleta).
Configúralo para aplicaciones React usando Vite o Create React App:
{
"type": "pwa-chrome",
"request": "launch",
"name": "Debug React App",
"url": " ",
"webRoot": "${workspaceFolder}/src",
"sourceMaps": true
}
Inicia tu servidor de desarrollo (npm start), luego presiona F5. VS Code lanza Chrome y conecta el depurador.
Establece breakpoints directamente en tus componentes React, inspecciona props y state, y avanza por los renders-todo desde VS Code.
Depuración del estado de componentes React
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. Usa la Consola de Depuración para probar expresiones contra el contexto actual de tu componente.
Características del depurador de Node.js
Habilita Auto Attach desde la Paleta de Comandos (Ctrl+Shift+P > “Toggle Auto Attach”). Configúralo en modo “smart”.
Ahora cualquier proceso de Node.js iniciado desde el terminal de VS Code se conecta automáticamente al depurador-sin necesidad de configuració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.
El Call Stack muestra claramente la ruta de ejecución asíncrona, facilitando el rastreo a través de flujos asíncronos complejos.
Depuración en Visual Studio
En Visual Studio, puede especificar varias opciones de configuración para el comportamiento del depurador, incluido cómo se muestran las variables, si se presentan determinadas advertencias, cómo se establecen los puntos de interrupción y cómo afecta la interrupción a los programas en ejecución.
Abra el cuadro de diálogo Opciones de herramientas> y expanda la sección Depuración. Seleccione la categoría de opciones de depuración que desea configurar, como General, Ventana de salida, Símbolos, etc.
Habilitar compatibilidad con vínculos de origen: indica al depurador de Visual Studio que descargue los archivos de origen de los archivos .pdb que contienen información de vínculos de origen.
Requerir que los archivos de origen coincidan exactamente con la versión original: indica al depurador que compruebe que un archivo de origen coincide con la versión del código fuente que se usa para compilar el ejecutable que está depurando.
Preguntas frecuentes sobre expresiones vigiladas
¿Puedo quitar una expresión vigilada sin modificar el código?
Las expresiones vigiladas se administran desde la ventana de Inspección del depurador, por lo que puedes eliminarlas sin editar el código de la aplicación.
¿Qué diferencia hay entre una expresión vigilada y un logpoint?
Una expresión vigilada se evalúa en la ventana Watch dentro del contexto de depuración, mientras que un logpoint imprime un valor en la Consola de Depuración sin detener la ejecución.
¿Por qué no se activan mis breakpoints en funciones asíncronas?
Asegúrate de que tu código asíncrono realmente se ejecute y llegue a la línea del breakpoint. Verifica que los source maps estén configurados correctamente para código transpilado.
A veces los breakpoints necesitan establecerse después de que el depurador inicie para módulos cargados dinámicamente.
¿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.
¿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.
tags: #quitar #expresiones #vigiladas #depurador
Publicaciones populares:
- Cómo limpiar tu MacBook Air de forma segura
- Funcionamiento de las depuradoras de piscinas con sal y con cloro
- Cómo solucionar filtraciones en el techo: métodos efectivos
- Tipos de filtros de corriente y sus usos
- Guía para empezar el caldo depurativo: cuándo es mejor