Scribd
Cargar
38 vistas11 páginas

Domina Breakpoints en VS Code

El documento enseña a los desarrolladores a utilizar breakpoints en VS Code para depurar aplicaciones de manera más eficiente que con console.log(). Se describen pasos detallados para activar y configurar el entorno de depuración, así como para añadir breakpoints y pausar la ejecución del código. El objetivo es mejorar la precisión en la identificación de errores y optimizar el proceso de debugging.

Cargado por

Carlos Apaza
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
38 vistas11 páginas

Domina Breakpoints en VS Code

El documento enseña a los desarrolladores a utilizar breakpoints en VS Code para depurar aplicaciones de manera más eficiente que con console.log(). Se describen pasos detallados para activar y configurar el entorno de depuración, así como para añadir breakpoints y pausar la ejecución del código. El objetivo es mejorar la precisión en la identificación de errores y optimizar el proceso de debugging.

Cargado por

Carlos Apaza
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

¿Sigues

debuggeando con
[Link]()?
Domina los breakpoints en VS Code y
debuggea como un pro 🧠

Por Noé Hernández, Frontend Developer


Cuando solo usas
[Link]()
Imprimes TODO... pero no
sabes cuándo falla

Tu consola parece un desfile de


logs

El bug solo ocurre cuando no lo


estás buscando
Usa breakpoints como un
desarrollador pro
VS Code te permite pausar la ejecución donde quieras,
inspeccionar datos en vivo y ver el flujo real de tu app.
Cómo activarlo (paso a paso)

Paso 1: Abre el panel de depuración


🐞
Haz clic en el icono de ▶️ con un (panel "Run and
Debug") ubicado en la barra lateral izquierda de Visual Studio
Code.
Paso 2: Crea la configuración
de depuración
Haz clic en el texto que dice "create a [Link] file" para
generar el archivo de configuración necesario para el
debugging.
Paso 3: Selecciona el entorno
de depuración
Elige el entorno que usarás para debuggear. Para desarrollo
web, selecciona "Chrome: Launch" o “Edge: Launch” como
navegador para ejecutar tu app directamente desde Visual
Studio Code.
Paso 4: Ajusta la URL de
desarrollo
Modifica el valor de la propiedad "url" en el archivo
[Link]. Si tu proyecto (por ejemplo, en [Link]) corre en el
puerto 3000, reemplaza el valor por defecto (8080) con:
Paso 5: Inicia tu proyecto y
comienza a debuggear
Ejecuta tu aplicación localmente y luego haz clic en el botón
"Start Debugging" (ícono de ▶️ verde en la parte superior
izquierda). También puedes presionar F5 como atajo rápido.
Paso 6: Añade breakpoints en
tu código
Dirígete al archivo y línea del código que deseas inspeccionar.
Haz clic a la izquierda del número de línea para añadir un
breakpoint (punto rojo).
Paso 7: ¡Listo!
Ahora, cuando tu app llegue a una línea con breakpoint,
la ejecución se pausará automáticamente. Desde ahí
podrás inspeccionar variables, revisar el flujo paso a
paso y encontrar errores con mayor precisión — sin
usar un solo [Link]().
Y tú, ¿cómo debuggeas
tus proyectos?
🧠 ¿Ya usas los breakpoints en tu flujo de
debugging o sigues con los clásicos
[Link]()?

💬 Cuéntame en los comentarios qué otro truco


de debugging te ha salvado la vida como dev.

👍 Si este tutorial te ayudó, dale like,


compártelo con tu equipo y guárdalo para
cuando lo necesites. ¡Más tips útiles vienen en
camino! 🚀

También podría gustarte