Sources y breakpoints: depuración paso a paso

Aprende a pausar ejecución, inspeccionar variables y seguir call stack para encontrar bugs reales en JavaScript.

Aquí cambias de nivel: de mirar síntomas a seguir la ejecución real del código con breakpoints 🎯.

Vas a dominar <code>step over</code>, <code>step into</code>, watch expressions y call stack para acotar bugs más rápido.

Si la lógica base te cuesta, repasa <a href="/curso/javascript">JavaScript</a> antes de meterte en depuración profunda.

  • No todos los breakpoints sirven para lo mismo.
  • Breakpoints por línea para flujo general, condicionales para casos específicos, y breakpoints de evento para rastrear acciones de usuario.
  • Usa breakpoints condicionales cuando el bug solo aparece con un valor concreto (por ejemplo, carrito vacío con cupón activo).
  • Entiende desde dónde se llamó a una función y con qué datos.
  • El call stack te enseña la cadena de llamadas que llevó al punto actual. Es clave para evitar arreglos superficiales.

Tipos de breakpoint y cuándo usar cada uno

No todos los breakpoints sirven para lo mismo.

Breakpoints por línea para flujo general, condicionales para casos específicos, y breakpoints de evento para rastrear acciones de usuario.

Usa breakpoints condicionales cuando el bug solo aparece con un valor concreto (por ejemplo, carrito vacío con cupón activo).

Call Stack y Watch Expressions

Entiende desde dónde se llamó a una función y con qué datos.

El call stack te enseña la cadena de llamadas que llevó al punto actual. Es clave para evitar arreglos superficiales.

Con watch expressions monitorizas variables críticas sin llenar tu código de logs temporales.

DevTools
04

Sources y breakpoints: depuración paso a paso

Aprende a pausar ejecución, inspeccionar variables y seguir call stack para encontrar bugs reales en JavaScript.

Código del tema: Diagnostico real en navegador

📘 Teoría

Tipos de breakpoint y cuándo usar cada uno

No todos los breakpoints sirven para lo mismo.

1

Breakpoints por línea para flujo general, condicionales para casos específicos, y breakpoints de evento para rastrear acciones de usuario.

2

Usa breakpoints condicionales cuando el bug solo aparece con un valor concreto (por ejemplo, carrito vacío con cupón activo).

Call Stack y Watch Expressions

Entiende desde dónde se llamó a una función y con qué datos.

1

El call stack te enseña la cadena de llamadas que llevó al punto actual. Es clave para evitar arreglos superficiales.

2

Con watch expressions monitorizas variables críticas sin llenar tu código de logs temporales.

🧪 Aprende probando

Ejemplo Ejemplo guiado: pausa con debugger Inserta debugger y revisa variables en runtime.
Ejemplo Ejemplo guiado: condición de breakpoint Pausa solo cuando total sea mayor que 100.
Ejemplo Demo: seguir call stack Visualiza cadena de funciones hasta el error.

🏁 Retos

Reto Reto: añade punto de pausa Inserta debugger dentro de una función crítica.
Reto Reto: fuerza error para inspección Genera un throw para practicar call stack.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre DevTools.

Test de DevTools

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com