Establecimiento de puntos de interrupción
Pause la ejecución e inspeccione el estado.
Establecimiento de puntos de interrupción es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Qué es un punto de interrupción
Un punto de interrupción indica al depurador que pause la ejecución en una línea específica. Mientras la ejecución está pausada, puede inspeccionar las variables y la pila de llamadas para comprender el estado del programa.
Por qué los puntos de interrupción son mejores que los logs
En comparación con distribuir instrucciones de log por el código, los puntos de interrupción le permiten examinar todas las variables del ámbito en un momento determinado sin modificar el código; después puede continuar o avanzar paso a paso desde allí.
Abrir el panel Sources
En las DevTools del navegador, los puntos de interrupción se encuentran en el panel Sources. Abra las DevTools, cambie a Sources y localice el archivo de script en el árbol de archivos.
Establecer un punto de interrupción de línea
Haga clic en el margen de números de línea junto a una instrucción para establecer allí un punto de interrupción. Aparecerá un marcador y la ejecución se pausará cuando esté a punto de ejecutarse esa línea.
La instrucción debugger
Al añadir una instrucción debugger al código se activa un punto de interrupción mediante programación cuando las DevTools están abiertas. Debe eliminarla antes de publicar el código en producción.
function compute(x) {
const doubled = x * 2
// a debugger statement on the next line would pause execution here
return doubled + 1
}Puntos de interrupción condicionales
Al hacer clic con el botón derecho en una línea puede añadir una condición. El depurador solo se pausa cuando la expresión es verdadera, lo que resulta especialmente útil dentro de los bucles.
Logpoints
Un logpoint imprime un mensaje sin pausar la ejecución, como una instrucción de log temporal que añade mediante las DevTools en lugar de editar el código fuente.
Inspeccionar variables
Cuando la ejecución está pausada, el panel Scope muestra las variables locales, de clausura y globales con sus valores actuales, para que pueda comprobar sus supuestos.
Expresiones de Watch
El panel Watch evalúa las expresiones que defina cada vez que la ejecución se pausa, lo que le permite supervisar un valor calculado mientras avanza por el código.
Puntos de interrupción en eventos
Las DevTools también pueden pausar la ejecución ante eventos, como un clic o una solicitud de red, justo en el momento en que se produce el evento.
Administrar puntos de interrupción
El panel Breakpoints muestra todos sus puntos de interrupción. Puede desactivarlos temporalmente mediante una casilla de verificación o eliminarlos cuando termine de depurar.
Comprobación rápida
Compruebe sus conocimientos sobre los puntos de interrupción.
Resumen
Resumen: Los puntos de interrupción pausan la ejecución para permitir su inspección.
- Establézcalos en el margen del panel Sources
- La instrucción debugger pausa el programa mediante programación
- Los puntos de interrupción condicionales solo pausan cuando la condición es verdadera
- Inspeccione el ámbito y las expresiones de Watch mientras la ejecución está pausada
Preguntas frecuentes
¿La lección «Establecimiento de puntos de interrupción» es gratis?
Sí — el texto completo de «Establecimiento de puntos de interrupción» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Establecimiento de puntos de interrupción»?
Pause la ejecución e inspeccione el estado. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Establecimiento de puntos de interrupción»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Más allá de console.log
- Establecimiento de puntos de interrupción
- Ejecución paso a paso del código
- Lectura de trazas de pila