Debuggear concatenación con DevTools

Aprende a debuggear JavaScript con DevTools para corregir un error común: cuando los valores de los inputs se tratan como strings y, en lugar de sumar, se concatenan. Verás cómo usar break points, console, watcher y la coerción explícita con parseInt para obtener resultados numéricos correctos con confianza.

¿Cómo identificar el error con DevTools en JavaScript?

El recorrido inicia siguiendo el flujo: onclick dispara el trigger, luego las funciones recolectan los valores de los inputs, validan que no estén vacíos y calculan la suma. En el scope local se observa que las variables tienen valores, pero el resultado es incorrecto por un detalle de tipo de dato.

• Revisa el scope y confirma que las variables guardan lo esperado.
• Usa la console para inspeccionar el tipo: typeof sum devuelve "string".
• Si los valores son strings, se produce concatenación: "10" + "20" → "1020".
• El problema no es la lógica de la función, sino el tipo del dato que llega a la suma.

¿Qué revela la consola con typeof y watcher?

• En la console: escribe typeof sum y verás que es un string.
• Usa un watcher con typeof sum para monitorear el tipo mientras avanzas con el break point.
• Prueba en consola la coerción explícita: parseInt(algo) cambia de string a número.

// Inspección rápida en consola:
typeof sum; // "string"

// Conversión explícita en consola:
parseInt("20"); // 20 (number)

¿Por qué ocurre la concatenación de strings en la suma?

• Los inputs entregan valores como strings.
• Al sumar strings, JavaScript realiza concatenación, no suma numérica.
• Por eso aparece un resultado como "1020" en lugar de 30.

¿Cómo usar break points con event listener u onclick?

• Coloca break points en el event listener o directamente en la función onclick para entrar al punto exacto.
• Avanza línea por línea y observa los valores en el scope y en watchers.
• Quita el break point desde el margen o el panel cuando termines y presiona play para continuar.

¿Cómo aplicar coerción explícita con parseInt para sumar números?

La solución es obligar el cambio de tipo de string a número antes de sumar. Esa es una coerción explícita con parseInt.

• Convierte cada operando a número con parseInt.
• Guarda los cambios desde source y continúa la ejecución.
• Repite la prueba: por ejemplo, 10 + 20 → 30; 5 + 5 → 10.

// Antes: concatenaba porque numberOne y numberTwo eran strings
// const sum = numberOne + numberTwo; // "1020"

// Después: fuerza la suma numérica con coerción explícita
const sum = parseInt(numberOne) + parseInt(numberTwo);

Consejos prácticos:

• Edita en source y guarda: usa command S en Mac o el atajo en Windows.
• Verifica que typeof sum ahora sea "number" tras aplicar parseInt.
• Si el valor cambia a 30, la suma ya es numérica y no concatenación.

¿Qué buenas prácticas de debugging aceleran el hallazgo del problema?

Depurar requiere ir paso por paso, con atención al detalle. Estas acciones marcan la diferencia al buscar la línea que causa el fallo.

• Define break points en el punto donde inicia el flujo: event listener u onclick.
• Recorre la ejecución paso a paso y observa variables en el scope local.
• Crea watchers para expresiones clave como typeof sum.
• Usa la console para validar hipótesis rápido y probar coerción explícita.
• Cambia el código solo cuando estés seguro del origen del error.
• Vuelve a correr, prueba con casos simples como 5 + 5 y confirma el resultado.
• Quita break points cuando ya no los necesites para evitar pausas.

¿Tienes dudas o alguna variación de este caso en tu proyecto? Cuéntalo en los comentarios y trabajemos la solución juntos.