En esta guía, se presupone que estás familiarizado con la inspección de CSS en las Herramientas para desarrolladores de Chrome. Consulta Cómo ver y cambiar CSS para conocer los conceptos básicos.
Inspecciona el CSS que creaste
Supongamos que agregaste CSS a un elemento y quieres asegurarte de que los diseños nuevos se apliquen correctamente. Cuando actualices la página, el elemento se verá igual que antes. Hay un error.
Lo primero que debes hacer es inspeccionar el elemento y asegurarte de que la nueva CSS se aplique realmente al elemento.
En ocasiones, verás tu CSS nuevo en el panel Elementos > Estilos, pero tu CSS nuevo está en texto pálido, no se puede editar, está tachado o tiene un ícono de advertencia o pista junto a él.
Información sobre CSS en el panel Estilos
El panel Styles reconoce muchos tipos de problemas de CSS y los destaca de diferentes maneras.
Selectores coincidentes y no coincidentes
En el panel Estilos, se muestran los selectores coincidentes en texto normal y los que no tienen coincidencia en texto pálido.
Declaraciones y valores no válidos
El panel Styles aparece tachado y muestra los íconos de advertencia 
junto a lo siguiente:
- Una declaración de CSS completa (propiedad y valor) cuando la propiedad de CSS no es válida o es desconocida
- Solo el valor cuando la propiedad de CSS es válida, pero no lo es.
Anulado
El panel Estilos tacha las propiedades anuladas por otras propiedades según el Orden en cascada.
En este ejemplo, el atributo de estilo width: 300px; del elemento anula width: 100% en la clase .youtube.
Inactivo
El panel Estilos se muestra en texto pálido y coloca los íconos de información 
junto a las propiedades que son válidas, pero no tienen ningún efecto debido a otras propiedades.
Estas propiedades pálidas están inactivas debido a la lógica de CSS, no al orden en cascada.
En este ejemplo, la propiedad display: block; inhabilita justify-content y align-items que controlan los diseños flexibles o de cuadrícula.
Heredada y no heredada
En el panel Styles, se enumeran las propiedades en las secciones Inherited from <element-name> según su herencia predeterminada:
- Los que se heredan de forma predeterminada se encuentran en texto normal.
- Los no heredados de forma predeterminada están en texto pálido.
Forma abreviada
Las propiedades de abreviaturas concisas te permiten configurar varias propiedades de CSS a la vez y pueden hacer que tu hoja de estilo sea más legible. Sin embargo, debido a la naturaleza corta de estas propiedades, es posible que pases por alto una propiedad de uso extendido (precisa) que anule una propiedad implícita por la abreviatura.
En el panel Styles, se muestran las propiedades abreviadas como listas desplegables 
que contienen todas las propiedades acortadas.
En este ejemplo, se anulan dos de las cuatro propiedades abreviadas.
No modificable
En el panel Estilos se muestran las propiedades que no se pueden editar en texto en cursiva. Por ejemplo, no se puede editar el CSS de las siguientes fuentes:
user agent stylesheet: Hoja de estilo predeterminada de Chrome.
Atributos HTML relacionados con el estilo en el elemento, por ejemplo, altura, ancho, color, etc. Puedes editarlos en el árbol del DOM y se actualizará la CSS en el panel Styles, pero no al revés.
En este ejemplo, el atributo
height="48"de un elemento<svg>se establece en50. Esto actualiza la propiedad correspondiente ensvg[Attributes Style]en el panel Styles.
Inspecciona un elemento que todavía no tenga el estilo que esperabas
Para tratar de encontrar lo que sale mal, te recomendamos que hagas lo siguiente:
- La documentación de CSS y la especificidad del selector en el cuadro de información del panel Estilos.
- El panel Computed permite ver el CSS definitivo aplicado a un elemento y compararlo con el que declaraste.
En el panel Elementos > Estilos se muestra el conjunto exacto de reglas CSS, tal como se escriben en varias hojas de estilo. Por otro lado, en el panel Elementos > Compute se enumeran los valores de CSS resueltos que Chrome usa para procesar un elemento:
- CSS derivados de la herencia
- Ganadores en Cascade
- Propiedades de atajos (precisas), no de abreviaturas (concisas)
- Valores calculados, por ejemplo,
font-size: 14pxen lugar defont-size: 70%
Comprende CSS en el panel Computed
El panel Compute también muestra varias propiedades de manera diferente.
Declarado y heredado
El panel Computed enumera las propiedades declaradas en cualquier hoja de estilo con fuente normal, tanto propias del elemento como heredadas. Haz clic en el ícono de expandir 
que está junto a ellas para ver su fuente.
Para ver la declaración en el panel Styles, coloca el cursor sobre la propiedad expandida y haz clic en el botón de flecha 
.
Para ver la declaración en el panel Sources, haz clic en el vínculo al archivo fuente.
Para las propiedades con varias fuentes, en el panel Computed se muestra primero el ganador de la cascada.
Entorno de ejecución
El panel Compute enumera los valores de las propiedades calculados en el tiempo de ejecución en texto simple.
En este ejemplo, Chrome calculó lo siguiente para el elemento <ul>:
- El elemento
widthen relación con su elemento superior,<div> - El
heighten relación con sus elementos secundarios, los dos elementos<li>
No heredados y personalizados
Para que el panel Computed muestre todas las propiedades y sus valores, marca 
Mostrar todo. Todas las propiedades incluyen lo siguiente:
- Los valores iniciales de las propiedades no heredadas están en texto pálido.
- Propiedades personalizadas: con un prefijo
--en el texto normal Estas propiedades se heredan de forma predeterminada.
Para desglosar esta lista grande en categorías, marca 
Group.
En este ejemplo, se muestran los valores iniciales de las propiedades no heredadas en Animación y las propiedades personalizadas en Variables de CSS.
Buscar duplicados
Para investigar una propiedad específica y sus posibles duplicados, escribe el nombre de esa propiedad en el cuadro de texto Filtro. Puedes hacer esto en los paneles Estilos y Procesamiento.
Consulta el artículo Cómo buscar y filtrar el CSS de un elemento.
Busca CSS sin usar
Consulta el artículo Cobertura: Encuentra JavaScript y CSS sin usar.