Browser DevTools (I)

¿Qué son las DevTools?

Las DevTools (Developer Tools) son un conjunto de herramientas integradas en los navegadores modernos que permiten inspeccionar, depurar y modificar páginas web directamente desde el navegador. Son esenciales para cualquier desarrollador frontend.

¿Por qué son importantes?

Permiten ver cómo está construida una página HTML/CSS.
Ayudan a detectar errores y solucionarlos rápidamente.
Facilitan experimentar con cambios en tiempo real sin editar el archivo fuente.
Son la mejor forma de entender por qué algo no está funcionando como debería.

¿Cómo abrirlas?

Windows/Linux: Ctrl + Shift + I o clic derecho > "Inspeccionar".
Mac: Cmd + Option + I.

Esto abrirá un panel lateral o inferior en el navegador con varias pestañas.

En qué enfocarse ahora (fase HTML/CSS)

En esta fase del programa, donde estamos trabajando principalmente con HTML y CSS, necesitas dominar solo tres pestañas:

Elements (Inspector)

Puedes ver y editar el HTML y CSS en tiempo real.
Puedes seleccionar cualquier parte de la página y ver cómo está estructurada.
Ideal para depurar errores de maquetación o estilos.
También puedes ver el box model visualmente y modificar márgenes, padding, etc., desde ahí.

Console

Muestra errores del navegador y advertencias.
A veces aparecen errores de CSS aquí (por ejemplo, propiedades mal escritas).
También sirve para escribir pequeños fragmentos de JavaScript (más adelante lo usaremos para eso).
En esta etapa, si ves errores, intenta leerlos aunque no los entiendas del todo. La costumbre de mirar la consola es clave.

Network

Te permite ver cómo se están cargando los recursos de la página (CSS, imágenes, etc.).
Útil para entender por qué algo no se está mostrando (por ejemplo, si una imagen no carga).
Puedes ver el código de respuesta, los headers, y el tamaño de cada recurso.

Descripción general de las pestañas de DevTools

Aunque ahora mismo no las necesites todas, te vendrá bien saber qué hace cada una para ir familiarizándote.

Pestaña	Para qué sirve
Elements (Inspector)	Ver y editar el HTML y CSS en tiempo real. Permite inspeccionar el DOM y ver cómo se aplican los estilos.
Console	Muestra errores y advertencias de JavaScript. También puedes escribir código directamente para probar.
Sources	Navega los archivos JS, HTML y CSS de la página. Sirve para establecer puntos de ruptura (breakpoints) y depurar JavaScript (más adelante).
Network	Muestra todas las solicitudes que hace la página (recursos, archivos, imágenes, etc.). Sirve para analizar tiempos de carga, errores, etc.
Performance	Permite grabar y analizar el rendimiento de la página: velocidad de renderizado, animaciones, carga...
Memory	Útil para detectar problemas de memoria y fugas (no lo necesitas en esta etapa).
Application	Accede a la información almacenada localmente (cookies, localStorage, IndexedDB), muy útil cuando trabajemos con login, datos, etc.
Lighthouse	Ejecuta auditorías automáticas de rendimiento, accesibilidad, SEO, etc.
Security	Muestra el estado de seguridad de la conexión (HTTPS, certificados, etc.).
Extras (Rendering, Layers, etc.)	Pestañas avanzadas que puedes activar desde los tres puntos ⋮ según las necesites.

Buenas prácticas (para empezar)

A partir de ahora, tenlas SIEMPRE abiertas mientras desarrollas.
Usa el inspector como forma de "entender cómo han construido" sitios que te gustan.
Prueba cambios de CSS directamente en el navegador antes de llevarlos a tu archivo.
Explora los errores que aparecen en la consola, aunque no los entiendas aún.
Usa Network si algo no carga o se ve roto.
Haz zoom sobre elementos con problemas y cambia propiedades como display, margin, padding, etc., en tiempo real para aprender visualmente.