Ejecución paso a paso del código
Ejecute paso a paso por encima, dentro y fuera de las funciones.
Ejecución paso a paso del código es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 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.
Avanzar paso a paso por el código
Una vez pausada la ejecución en un punto de interrupción, puede avanzar paso a paso por el código, una operación cada vez, para observar cómo cambia el estado línea por línea.
Reanudar
El botón de reanudar continúa la ejecución normal hasta el siguiente punto de interrupción o hasta que finaliza el programa. Úselo cuando ya haya visto suficiente en la pausa actual.
Pasar por encima
Pasar por encima ejecuta por completo la línea actual, incluida cualquier función que llame, y después pausa la ejecución en la siguiente línea de la misma función. No entra en la función llamada.
function helper() {
return 5
}
function main() {
const a = helper()
const b = a + 1
return b
}Entrar
Entrar accede a una llamada de función de la línea actual y pausa la ejecución en su primera instrucción para que pueda depurarla desde dentro.
function helper() {
const x = 10
return x
}
function main() {
return helper()
}Salir
Salir termina la función actual y pausa la ejecución en la línea inmediatamente posterior a la llamada que le llevó hasta ella. Úselo para salir de una función que ya no necesite inspeccionar.
Elegir un comando de avance
Use pasar por encima cuando confíe en una función, entrar para investigarla y salir cuando haya confirmado que la lógica interna es correcta.
El panel de la pila de llamadas
Mientras avanza paso a paso, el panel de la pila de llamadas muestra la cadena de llamadas de función que condujo hasta la línea actual. Al hacer clic en un marco, salta a ese contexto.
Observar los cambios de estado
A medida que avanza paso a paso, los paneles Scope y Watch se actualizan, lo que le permite ver exactamente qué línea modifica una variable de forma inesperada.
Avanzar paso a paso en bucles
Dentro de un bucle, el avance paso a paso repite el cuerpo en cada iteración. Un punto de interrupción condicional suele ser más rápido que avanzar manualmente por muchas iteraciones.
function sumTo(n) {
let total = 0
for (let i = 1; i <= n; i++) {
total += i
}
return total
}Entrar en el código de bibliotecas
Entrar puede llevarle al código interno de una biblioteca. Las DevTools ofrecen una función para ignorar los scripts indicados y permitirle permanecer en su propio código.
Un flujo de trabajo habitual
Establezca un punto de interrupción cerca del error sospechado y avance línea por línea, observando las variables hasta descubrir dónde diverge la realidad de lo esperado.
Comprobación rápida
Compruebe sus conocimientos sobre el avance paso a paso.
Resumen
Resumen: El avance paso a paso permite recorrer el código de forma controlada.
- Pasar por encima ejecuta una línea sin entrar en las llamadas
- Entrar accede a una función llamada
- Salir termina la función actual
- La pila de llamadas muestra cómo llegó hasta allí
Preguntas frecuentes
¿La lección «Ejecución paso a paso del código» es gratis?
Sí — el texto completo de «Ejecución paso a paso del código» 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 «Ejecución paso a paso del código»?
Ejecute paso a paso por encima, dentro y fuera de las funciones. 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 3 de 4.
¿Cuánto tiempo toma la lección «Ejecución paso a paso del código»?
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