JavaScript
Presenta un proceso de debugging basado en reproducir, reducir, observar y comprobar hipótesis con stack traces, breakpoints, consola y source maps.
es el proceso de encontrar la causa real de un comportamiento incorrecto.
function calculateTotal(items) {
return items.reduce(
(total, item) => total + item.price,
0,
);
}Síntoma:
El total aparece como 01020.Causa posible:
[
{ price: "10" },
{ price: "20" },
]El operador + concatena cuando uno de los operandos es string.
Corregir solo la presentación:
Number(total);puede ocultar que los datos entraron con un tipo incorrecto.
Un buen fix actúa en la frontera donde se originó el dato inválido.
1. Definir el comportamiento esperado.
2. Reproducir el problema.
3. Reducir el caso.
4. Observar el estado real.
5. Formular una hipótesis.
6. Probar una sola variable.
7. Corregir la causa.
8. Verificar casos relacionados.
9. Evitar que vuelva a ocurrir.“No funciona” no describe un problema investigable.
Más útil:
Al enviar una cantidad de 0, el formulario muestra 1 y crea una orden con una unidad.Incluye:
Un bug reproducible permite comparar intentos.
Registra:
Si aparece una vez entre cien, intenta identificar qué cambia entre ejecuciones: tiempo, orden, red, cache, estado compartido o datos.
const products = await loadProducts();
const visible = applyPermissions(products);
const sorted = sortProducts(visible);
renderProducts(sorted);Pregunta en qué punto aparece el valor incorrecto.
console.log({ products });
console.log({ visible });
console.log({ sorted });Después elimina partes no necesarias hasta conservar el fallo mínimo.
Un caso pequeño reduce hipótesis y facilita escribir una prueba.
TypeError: Cannot read properties of undefined (reading 'name')
at renderProduct (product-card.js:18)
at renderProducts (products.js:42)La primera línea explica el tipo de operación. La traza muestra el camino de llamadas.
No leas únicamente la línea superior. Pregunta:
undefined?Un breakpoint pausa la ejecución antes de una línea y permite inspeccionar el estado en ese momento.
En DevTools puedes:
Es mejor que llenar el código de logs cuando necesitas entender una secuencia.
function calculateTotal(items) {
debugger;
return items.reduce(
(total, item) => total + item.price,
0,
);
}Con DevTools abierto, la ejecución se pausa en esa sentencia.
Retírala antes de integrar el cambio. Un debugger olvidado puede detener la aplicación de quien tenga herramientas abiertas.
Pausa siempre al alcanzar una línea.
Pausa solo cuando se cumple una expresión.
item.id === "product-42"Es útil dentro de bucles donde solo falla un elemento.
DevTools puede pausar cuando se lanza una excepción:
Pausar en excepciones capturadas ayuda a encontrar código que está escondiendo errores mediante catch.
Registra un valor sin modificar el archivo ni detener la ejecución.
Es útil para observar una ruta frecuente con menos interrupción.
En el navegador puedes pausar ante ciertos eventos, cambios del DOM o solicitudes. Son herramientas del entorno, no características del lenguaje, pero ayudan a encontrar quién inició una acción.
Ejecuta la línea actual sin entrar visualmente en cada función llamada.
Entra en la función para observar su ejecución.
Termina la función actual y vuelve a quien la llamó.
Úsalos según la pregunta. Si sabes que una utilidad funciona, haz step over. Si sospechas de su contrato, entra.
Cuando la ejecución está pausada, revisa:
this.No mires solo el valor incorrecto. Busca el primer frame donde dejó de ser correcto.
Puedes mantener expresiones visibles mientras avanzas.
item.price
Number(item.price)
total
items.lengthUna watch expression responde una pregunta específica. Evita agregar objetos enormes sin saber qué propiedad investigas.
console pertenece al entorno, no al núcleo de ECMAScript. Navegadores y Node.js ofrecen implementaciones similares, pero algunos métodos y formatos varían.
Herramientas útiles:
console.log(value);
console.table(products);
console.dir(element);
console.trace("Reached here");
console.group("Checkout");
console.groupEnd();
console.time("load-products");
console.timeEnd("load-products");
console.count("render");
console.assert(total >= 0, "Negative total");Los logs deben responder preguntas. Un objeto sin etiqueta repetido veinte veces suele crear más ruido.
console.log("checkout input", {
orderId: order.id,
itemCount: order.items.length,
});No registres secretos ni datos personales innecesarios.
Las herramientas pueden mostrar objetos por referencia. Si expandes un objeto después de que cambió, podrías observar su estado actual y no exactamente el estado que tenía al llamar a console.log.
Para valores pequeños, registra propiedades concretas:
console.log({
status: order.status,
total: order.total,
});O crea una copia apropiada para diagnóstico, sabiendo que una copia superficial no congela estructuras anidadas.
Aplicaciones modernas suelen ejecutar código transformado, agrupado o minificado.
Un source map relaciona ese código generado con los archivos originales.
código original
↕
source map
↕
código ejecutadoCuando el bundler y el servidor los ofrecen correctamente, DevTools puede mostrar TypeScript o JavaScript fuente y mapear breakpoints y stack traces.
No publiques source maps sensibles sin decidir su estrategia. Pueden facilitar diagnóstico, pero también revelar código fuente al público según cómo se sirvan.
button.addEventListener("click", async () => {
const order = await loadOrder();
renderOrder(order);
});La ejecución atraviesa eventos, promesas y callbacks.
Herramientas modernas pueden mostrar trazas asíncronas, pero debes distinguir:
El Event Loop y las promesas se estudiarán en el siguiente bloque.
const original = {
settings: {
theme: "dark",
},
};
const copy = { ...original };
copy.settings.theme = "light";El bug aparece porque ambas referencias comparten settings.
Para investigarlo:
===.Si el bug apareció después de un cambio:
No asumas que la última línea editada es la causa. El cambio puede haber revelado una suposición antigua.
Menos eficaz:
Cambiar el parser, agregar timeout, copiar el objeto y actualizar la dependencia al mismo tiempo.Si funciona, no sabrás qué lo corrigió.
Mejor:
Hipótesis: price llega como string.
Prueba: inspeccionar typeof price antes de reduce.
Resultado: confirmado o descartado.Comprueba:
Después añade una protección apropiada:
Problema:
const items = [
{ price: "10" },
{ price: "20" },
];
calculateTotal(items); // "01020"Investigación:
for (const item of items) {
console.log({
price: item.price,
type: typeof item.price,
});
}Fix en la frontera:
function parseItem(value) {
const price = Number(value.price);
if (!Number.isFinite(price)) {
throw new ValidationError(
"Item price is invalid",
);
}
return {
...value,
price,
};
}El núcleo recibe números confiables y no necesita corregir tipos durante cada cálculo.
¿Por qué convertir total a Number al final puede ser un fix insuficiente?
Porque corrige el síntoma después de que datos con tipos incorrectos ya atravesaron el sistema. La causa está en la frontera que aceptó precios como strings; otros cálculos pueden seguir fallando.
Strict mode explica qué comportamientos inseguros o ambiguos cambia JavaScript al ejecutar código estricto.