Cómo debuguear JavaScript con DevTools

Aprende a depurar JavaScript en el navegador con DevTools y resuelve errores reales sin perder tiempo. Verás cómo detectar el event listener correcto, pausar la ejecución con breakpoints, seguir la lógica con el debugger y leer el Scope para entender qué valores viajan por tus variables. Caso práctico: al sumar 10 y 20 se muestra 1020; una señal clara de que algo falla en la lógica de la operación.

¿Cómo depurar JavaScript con DevTools paso a paso?

Para localizar el origen del fallo, se parte del navegador y se abre el inspector. El foco está en la pestaña de Sources, donde se identifican los event listeners del botón que dispara la operación. El botón es el trigger: al hacer clic, debería ejecutarse una función que toma los valores de los inputs y calcula el resultado.

¿Qué problema revela la suma 10 + 20?

• Se ingresan 10 y 20 en los inputs.
• Al hacer clic, el resultado muestra 1020.
• Esto evidencia que la operación no está produciendo una suma numérica.

¿Dónde colocar el breakpoint en el onclick?

• En Sources, abrir Event Listeners.
• Filtrar por mouse y elegir click.
• Al hacer clic en el botón, el debugger se detiene en el onclick.

¿Cómo avanzar paso a paso con el debugger?

• Usar los controles de paso para seguir la ejecución.
• Detectar el if statement que valida las condiciones iniciales.
• Entrar a las funciones que obtienen valores: getNumberOne y getNumberTwo.
• Observar la validación de campos vacíos y el paso por el else.
• Llegar a la actualización de labels y a la creación de la variable suma.

¿Qué conceptos y habilidades prácticas aplicas al debuggear en navegador?

Dominar la depuración en el navegador requiere identificar eventos, pausar el flujo y leer el estado en cada paso. Así se construye criterio para aislar problemas sin editar código a ciegas.

• DevTools: panel del navegador para inspección y depuración.
• Consola y Sources: espacios para ver errores y el código fuente.
• Event listener de click: función asociada al botón que actúa como trigger.
• Breakpoint: pausa la ejecución justo donde ocurre el evento.
• Onclick: punto de entrada a la lógica que procesa los inputs.
• If statement: bloque que valida condiciones antes de continuar.
• Funciones getNumberOne y getNumberTwo: obtienen el value de los inputs.
• else y actualización de labels: ruta cuando la validación no se cumple.
• Variable suma: combinación de los valores obtenidos para mostrar el resultado.
• Scope local y global: vista de variables y sus valores en cada línea.

¿Qué flujo sigue la función y dónde puede estar el foco del error?

La ejecución se detiene en el onclick y avanza por un if statement que valida los datos. Luego entra a getNumberOne y getNumberTwo para recuperar el value de los inputs. Si no se cumple la condición, cae en el else y se actualizan labels. Finalmente, se crea suma con los dos valores y se genera el texto del resultado. En el Scope se observan los valores 10, 20 y suma, pero la interfaz muestra 1020, indicio de una lógica incorrecta al combinar los valores. La corrección se aborda en la siguiente parte.

• El botón dispara el event listener de click.
• Se valida con un if statement y se navega entre funciones internas.
• Se leen los values de los inputs con getNumberOne y getNumberTwo.
• Si la validación falla, se ejecuta else y se actualizan labels.
• Se forma suma y se arma el texto para el resultado.
• El Scope confirma los valores disponibles en cada línea.

¿Te encontraste con un caso similar? Cuéntame qué parte del debugging te costó más y en qué paso te gustaría profundizar.