Hoy · Hoja de ruta
- 1. Aprende: Los cuatro tipos de error, y cómo se para un programa para mirar dentro.
- 2. Haz: Depura tres programas rotos que no puedes reescribir.
- 3. Comprueba: Encuentras la causa antes de tocar el código.
Antes de empezar · 5 minutos, sin apuntes
- ¿Qué haces ahora mismo cuando algo no funciona?
- ¿Cuántas veces has cambiado código sin saber por qué funcionaba?
- ¿Qué información te daría más que un mensaje de error?
Los cuatro tipos de error
| Tipo | Qué es | Ejemplo |
|---|---|---|
| Sintaxis | El código no se puede leer | Falta una llave o un paréntesis |
| Referencia | Usas un nombre que no existe | Una variable mal escrita |
| Tipo | Llamas a algo que no es lo que crees | productos.filtrar is not a function |
| Lógico | No hay error, pero el resultado está mal | El total sale mal, y nadie protesta |
Los tres primeros los encuentra el navegador. El cuarto solo lo encuentras tú, y es el que de verdad importa.
La consola, más allá de console.log
console.log(producto); // lo normal
console.table(productos); // una lista de objetos, en tabla
console.warn("Stock bajo"); // aviso
console.error("Precio inválido"); // error
console.log({ subtotal, envio, total }); // nombre y valor de cada unoEl último truco vale su peso en oro: envolviendo las variables en llaves, la consola imprime el nombre junto al valor, y se acabaron los seis números sueltos que no sabes de quién son.
Puntos de interrupción
console.log te dice el valor en un punto. Un punto de interrupción te deja parar el programa y mirarlo todo a la vez.
- Pestaña Sources y abre tu fichero
- Clic en el número de línea: punto de interrupción
- Recarga: la ejecución se detiene ahí
- Mira Scope: todas las variables y sus valores
- Avanza paso a paso y observa qué cambia
También puedes escribir debugger; en el código: con DevTools abierto, el programa se detiene en esa línea.
Depurar es reducir el trozo sospechoso, no cambiar cosas
El método es siempre el mismo: qué esperabas, qué ocurre, dónde deja de coincidir. Pon una comprobación a la mitad del recorrido. Si ahí ya está mal, el problema está antes; si está bien, está después. Cada comprobación divide el terreno en dos.
Cambiar líneas a ver si suena la flauta puede arreglar el síntoma de hoy y dejar la causa dentro.
Tarea 9 · Tres programas rotos
Recibirás tres ficheros con un fallo cada uno: uno de referencia, uno de tipo y uno lógico. Para cada uno:
- Escribe qué debería hacer el programa.
- Ejecútalo y anota qué hace en realidad.
- Localiza con un punto de interrupción la primera línea donde el valor deja de ser el esperado.
- Explica la causa antes de corregir.
- Corrige con el cambio más pequeño posible.
Cierre de la semana 3
- Tu programa está hecho de funciones pequeñas que devuelven valores.
- Sabes pasar una función como argumento.
- Usas puntos de interrupción, no solo
console.log. - Explicas la causa de un fallo antes de corregirlo.
Ver respuestas
1 · Sintaxis, referencia, tipo y lógico. El lógico es el peligroso porque no avisa.
2 · Envolviendo las variables en llaves dentro del console.log, para ver el nombre junto al valor.
3 · Preguntarse qué se esperaba, qué ocurre, y dónde deja de coincidir; después, dividir el recorrido en dos.
Microprueba semanal 3 · 5–10 minutos
Individual, sin IA y sin apuntes.
- Escribe una función que reciba una base y un tipo de IVA y devuelva el total. Sin imprimir nada.
- ¿Qué devuelve
(n) => n * 2? ¿Y(n) => { n * 2 }? - Un total sale mal y la consola no muestra ningún error. Describe los dos primeros pasos que darías.