Herramientas
Tutorial: usa las DevTools del navegador para encontrar errores
Aprende a usar la consola, el inspector y la pestaña de red del navegador para depurar tu código.
Las herramientas de desarrollador (DevTools) son tu mejor amigo cuando algo no funciona. Se acabó el "no sé por qué no funciona": ahora vas a saber exactamente dónde mirar.
Paso 1: ábrelas
Presiona F12 o clic derecho en la página → "Inspeccionar". Se va a abrir un panel con varias pestañas: Elements/Elementos, Console/Consola, Network/Red, entre otras.
Paso 2: la pestaña Elements/Elementos
Aquí ves el HTML real de la página (incluyendo cambios hechos por JavaScript). Haz clic en cualquier elemento de la página y se va a resaltar en este panel automáticamente. Puedes editar el HTML y CSS ahí mismo para experimentar, sin miedo: al recargar la página todo vuelve a la normalidad.
Paso 3: la pestaña Console/Consola
Aquí aparecen tus console.log() y, más importante, los errores de JavaScript en rojo. Un mensaje de error casi siempre te dice el archivo y la línea exacta donde algo salió mal. Léelo, no le tengas miedo: la mayoría de las veces literalmente te dice qué hacer.
console.log('Valor de la variable:', miVariable);
console.error('Algo salió mal aquí');
console.table([{ nombre: 'Ana' }, { nombre: 'Luis' }]);
console.table() muestra arrays de objetos como una tabla ordenada, mucho más fácil de leer que un montón de texto plano.
Paso 4: la pestaña Network/Red
Aquí ves cada petición que hace tu página (imágenes, archivos CSS, peticiones fetch). Si una petición sale en rojo o dice "failed", ese es el primer lugar donde buscar cuando tu fetch "no funciona".
Paso 5: pon un punto de quiebre (breakpoint)
En la pestaña "Sources/Fuentes", haz clic en el número de línea de tu código para pausar la ejecución justo ahí. Puedes inspeccionar el valor de cada variable en ese momento exacto, como pausar una película para revisar un fotograma.
¿Qué acabas de aprender?
- Cómo abrir las DevTools y para qué sirve cada pestaña principal.
- Cómo leer un error en la consola en vez de temerle.
- Cómo usar un breakpoint para pausar tu código y examinarlo paso a paso.