DevTools (herramientas de desarrollador)

Cómo se abren

F12 · o clic derecho sobre cualquier cosa → Inspeccionar · o Ctrl+Shift+I (Cmd+Opt+I en Mac).

Las tres pestañas que vas a usar desde hoy

Pestaña	Qué ves	Para qué
Elements	el HTML y el CSS de lo que tienes delante	entender cómo está construida una web; probar cambios al instante
Console	mensajes y errores	primer sitio donde mirar cuando algo no funciona
Network	todas las peticiones que hace la página, cuánto tardan y cuánto pesan	ver qué falló, por qué va lenta

Por qué es tu mejor profesor

Cualquier web bien hecha es un ejemplo abierto: puedes desmontarla y ver cómo lo hicieron. Y cuando empieces a construir, las DevTools serán donde pases más horas depurando.

Aviso importante

Lo que cambies ahí no afecta a la web real: solo a lo que tú ves en tu pantalla, y se deshace al recargar. Toca sin miedo.

Un paso más: el modo móvil y el selector

Dos funciones que usarás desde la Fase 2:

Modo dispositivo (Ctrl + Shift + M): muestra la página como en un móvil. Arriba eliges el ancho; 360 px es un móvil pequeño y tu medida de referencia → responsive.
El selector (la flecha de arriba a la izquierda, o Ctrl + Shift + C): haces clic sobre cualquier cosa de la página y te lleva a su código.

Y un detalle que confunde: la consola de las DevTools no es la terminal. En la consola hablas con una página web (en JavaScript); en la terminal, con tu ordenador.

Compruébalo tú

Abre una web que uses a diario, activa el modo dispositivo a 360 px y busca tres cosas que cambian respecto a la versión de escritorio (menús, columnas, tamaños).