Herramientas del navegador

Abrir el inspector

Todos los navegadores modernos (Chrome, Firefox, Edge) traen herramientas de desarrollo integradas. La forma más directa de abrirlas sobre un elemento puntual:

1. Clic derecho sobre cualquier elemento de la página.
2. Elegí "Inspeccionar" (o "Inspeccionar elemento").

Se abre un panel — normalmente a un costado o abajo de la pantalla — con dos partes que importan para CSS: el árbol de HTML (a la izquierda o arriba) y el panel de Styles (o "Estilos", a la derecha o abajo), que muestra exactamente qué reglas CSS se le están aplicando al elemento seleccionado.

Leer el panel de Styles

El panel de Styles no muestra solo la regla que "ganó" — muestra todas las reglas que le compiten a ese elemento, en el mismo orden de especificidad que viste en la Lección 3. Las que perdieron aparecen tachadas.

Esto lo convierte en la herramienta más rápida para resolver el problema clásico de "le puse esta propiedad y no pasa nada": casi siempre es porque otra regla, más específica o más abajo en el archivo, le está ganando — y el inspector te lo muestra tachado, en vivo.

Al final del panel de Styles suele haber una sección de Box Model (o "Modelo de caja"): un diagrama con los números reales de content, padding, border y margin de ese elemento en particular — la forma más directa de confirmar cuánto está midiendo algo de verdad, en vez de calcularlo a mano.

Editar en vivo, sin guardar nada

Todo lo que edites en el panel de Styles se aplica al instante, en la página que estás mirando — clickeás un valor, lo cambiás, y ves el resultado ahí mismo. Es una forma muy rápida de probar "¿y si este margin fuera más grande?" sin tocar el archivo real.

Importante: nada de esto se guarda. Si recargás la página, todo vuelve a como estaba en el archivo .css real. El inspector es para probar y entender — el cambio definitivo siempre hay que hacerlo en el archivo de verdad, a mano.

Este ida y vuelta — probar en el inspector, confirmar que se ve bien, después escribir el mismo cambio en el archivo .css — es el flujo de trabajo real de cualquiera que escribe CSS, no solo un truco de principiante.

Para probar ahora

No hay un ejercicio con corrector automático en esta lección — es una herramienta del navegador, no algo que se escriba. Antes de seguir a la lección final, probá esto en cualquier página (esta misma, por ejemplo):

1. Clic derecho sobre un texto cualquiera → Inspeccionar.
2. En el panel de Styles, encontrá la propiedad color o font-size de ese elemento.
3. Cambiale el valor y mirá cómo se actualiza la página al instante.
4. Recargá la página y confirmá que todo volvió a la normalidad — nada de lo que tocaste quedó guardado.