¿Cómo puedo usar las herramientas de desarrollador del navegador para inspeccionar y depurar estilos CSS?

Las herramientas de desarrollador (DevTools), integradas en navegadores modernos como Chrome, Firefox o Edge, son indispensables para trabajar con CSS.

Normalmente, puedes abrirlas pulsando la tecla F12 o haciendo clic derecho sobre un elemento de la página y seleccionando «Inspeccionar» o «Inspeccionar elemento».

Una vez abiertas, la pestaña «Elementos» (o «Inspector») es tu principal aliada para CSS:

1. Seleccionar un elemento: Puedes hacer clic en cualquier elemento directamente en la página (usando el icono de selector, usualmente una flecha sobre un cuadrado) o navegar por el árbol HTML que se muestra en las DevTools. Al seleccionar un elemento, se resaltará en la página.
2. Panel de estilos (Styles/Reglas): Al lado del árbol HTML, encontrarás un panel que muestra todas las reglas CSS aplicadas al elemento seleccionado. Aquí puedes:
   • Ver qué estilos se aplican, de qué archivo CSS provienen y en qué número de línea.
   • Identificar estilos anulados (a menudo aparecen tachados), lo que es crucial para depurar problemas de especificidad o cascada.
   • Modificar estilos en tiempo real: puedes desactivar propiedades desmarcando su casilla, cambiar valores existentes haciendo clic sobre ellos, o añadir nuevas declaraciones CSS para experimentar al instante.
   • Forzar estados de pseudo-clases (como :hover, :active o :focus) para ver cómo se comporta el elemento.
3. Panel calculado (Computed): Esta sección muestra los valores finales que el navegador ha calculado para cada propiedad CSS del elemento seleccionado, después de considerar todas las reglas, la herencia y los valores por defecto. También suele incluir un diagrama visual del modelo de caja (content, padding, border, margin) que te permite ver y, a veces, editar estas dimensiones.
4. Herramientas específicas de layout: Para sistemas como Flexbox o Grid, los navegadores suelen ofrecer superposiciones visuales y herramientas dedicadas que te ayudan a entender cómo están distribuidos los ítems y a depurar problemas de alineación o espaciado.

Explorar estas secciones te permitirá entender por qué un elemento se ve de una manera determinada y probar soluciones rápidamente.