Depuración
Depurar es averiguar por qué el programa hace lo incorrecto. Esta página tiene un pedido, { drink: "tea", size: "regular" }, y un nombre de propiedad equivocado. El bug lee order.cup. El registro roto es tea / undefined. Tras el arreglo, la línea de la página es fixed / tea / regular.
No es la lección de clases
La página anterior construyó Drink y SpecialDrink. Su línea era tea / regular / mint. Allí nada estaba roto a propósito.
Aquí los datos ya son correctos. El bug lee order.cup, pero el objeto tiene size, no cup. La propiedad real es size.
Lee el valor antes de reescribir la función
console.log imprime un valor y no detiene el script. console.warn marca un aviso. console.error marca un fallo. Ninguno repara los datos. Solo hacen visible el valor incorrecto.
El nombre de la propiedad es incorrecto
label une order.drink y order.cup. drink existe, así que la primera palabra es tea. cup no existe, así que la segunda palabra es undefined.
const order = { drink: "tea", size: "regular" };
function label(order) {
return order.drink + " / " + order.cup;
}
console.log(label(order));
El registro es tea / undefined. El objeto sigue teniendo size. La función nunca lo leyó.
Marca el fallo
Cuando falta size, llama a console.error("missing size"). Este fragmento pasa un pedido sin tamaño para que corra la ruta de error. console.error("missing size") no lanza.
function label(order) {
if (!order.size) {
console.error("missing size");
return order.drink + " / missing size";
}
return order.drink + " / " + order.size;
}
console.log(label({ drink: "tea" }));
La consola muestra el error missing size, y el texto devuelto es tea / missing size. Un pedido vacío de size devuelve tea / missing size. Una cadena vacía también cuenta como ausente porque !"" es verdadero.
Pausa a propósito
La sentencia debugger pide al navegador que pause solo cuando las herramientas de desarrollo están abiertas. Si están cerradas, la sentencia no hace nada y la línea siguiente sigue.
const order = { drink: "tea", size: "regular" };
debugger;
console.log(order.size);
Con las herramientas abiertas, la ejecución se detiene en debugger y puedes inspeccionar order. Con las herramientas cerradas, el siguiente registro es regular. debugger no es un error y no cambia order.
La lista de llamadas
Si label llama a format y format lanza, la consola lista ambos nombres. Empieza por arriba de esa lista: es la línea que falló. Luego vuelve a quien llamó. El bug de esta página no lanza nada. undefined es un valor, así que la lista sigue en silencio hasta que lo registres.
Cambia un solo nombre
Sustituye order.cup por order.size. No añadas una propiedad cup solo para callar undefined. El objeto ya estaba bien. La propiedad real es size.
La línea después del arreglo
La página lee size, lo comprueba y escribe un estado corto antes de la etiqueta.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
const order = { drink: "tea", size: "regular" };
function label(order) {
if (!order.size) {
console.error("missing size");
return order.drink + " / missing size";
}
return order.drink + " / " + order.size;
}
document.getElementById("line").textContent = "fixed / " + label(order);
</script>
</body>
</html>
La línea dice fixed / tea / regular. La palabra fixed es solo un estado. La bebida y el tamaño vienen del objeto. tea / undefined era la función rota.
En el mostrador
- Registra
label(order)mientras leeorder.cup. El registro es tea / undefined. - Pasa
{ drink: "tea" }y lee el error. El texto devuelto es tea / missing size. - Deja
debuggeren el script. Con las herramientas cerradas, el siguiente registro sigue siendo regular. - Lee la línea de la página: fixed / tea / regular.
Errores frecuentes
- Cambiar el objeto porque el registro dice undefined
- Tratar
console.logcomo una pausa;console.logno detiene el script - Esperar que
debuggerpare la página con las herramientas cerradas - Leer
tea / regular / mintde la página de clases - Llamar a
console.error("missing size")y creer que lanza
Quédate con esto
console.logmuestra un valor y el script continúa- La lectura rota es
order.cup; la propiedad real essize console.error("missing size")marca el fallo y no lanzadebuggerpausa solo mientras las herramientas de desarrollo están abiertas- La línea de la página dice fixed / tea / regular
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior