Este guia pressupõe que você esteja familiarizado com a inspeção de CSS no Chrome DevTools. Consulte Visualizar e alterar o CSS para aprender as noções básicas.
Inspecionar o CSS que você criou
Suponha que você tenha adicionado CSS a um elemento e queira garantir que os novos estilos sejam aplicados corretamente. Quando você atualizar a página, o elemento terá a mesma aparência de antes. Algo está errado.
A primeira coisa a fazer é inspecionar o elemento e verificar se o novo CSS está realmente aplicado a ele.
Às vezes, o novo CSS vai aparecer no painel Elementos > Estilos, mas ele está em texto em branco, não editável, riscado ou tem um ícone de aviso ou dica ao lado.
Entender CSS no painel Estilos
O painel Styles reconhece vários tipos de problemas de CSS e os destaca de diferentes maneiras.
Seletores correspondentes e não correspondentes
O painel Estilos mostra os seletores correspondentes em texto normal e os não correspondentes em texto claro.
Declarações e valores inválidos
O painel Styles risca e mostra ícones de aviso 
ao lado dos seguintes itens:
- Uma declaração CSS inteira (propriedade e valor) quando a propriedade CSS é inválida ou desconhecida.
- Apenas o valor quando a propriedade CSS é válida, mas o valor é inválido.
Substituído
O painel Estilos elimina as propriedades que são substituídas por outras de acordo com a Ordem em cascata.
Neste exemplo, o atributo de estilo width: 300px; no elemento substitui width: 100% na classe .youtube.
Inativo
O painel Styles é exibido em pale text e coloca ícones de informações 
ao lado de propriedades válidas, mas que não têm efeito devido a outras propriedades.
Essas propriedades claras ficam inativas devido à lógica do CSS, não à Ordem em cascata.
Neste exemplo, a propriedade display: block; desativa justify-content e align-items que controlam layouts flexíveis ou de grade.
Herdados e não herdados
O painel Estilos lista propriedades em seções Inherited from <element-name>, dependendo da herança padrão delas:
- Os herdados por padrão são exibidos em texto normal.
- Por padrão, os não herdados estão em pale text.
Abreviação
Propriedades abreviadas (concisas) permitem definir várias propriedades CSS de uma só vez e tornar sua folha de estilo mais legível. No entanto, devido à natureza curta dessas propriedades, você pode perder uma propriedade longa (exata) que substitui uma propriedade implícita pela abreviação.
O painel Estilos mostra propriedades abreviadas como listas suspensas 
que contêm todas as propriedades encurtadas.
Neste exemplo, duas das quatro propriedades abreviadas são substituídas.
Não editável
O painel Estilos mostra propriedades que não podem ser editadas em itálico. Por exemplo, não é possível editar o CSS das seguintes origens:
user agent stylesheet: folha de estilo padrão do Chrome.
Atributos HTML relacionados a estilo no elemento, por exemplo, altura, largura, cor etc. Você pode editá-los na árvore do DOM e isso atualiza o CSS no painel Styles, mas não o contrário.
Neste exemplo, o atributo
height="48"em um elemento<svg>está definido como50. Isso atualiza a propriedade correspondente emsvg[Attributes Style]no painel Styles.
Inspecionar um elemento que ainda não está com o estilo que você imagina
Para tentar descobrir o que deu errado, verifique:
- Documentação do CSS e especificidade do seletor nas dicas do painel Estilos.
- No painel Calculado, veja o CSS "final" aplicado a um elemento e compare com o que você declarou.
O painel Elementos > Estilos exibe o conjunto exato de regras de CSS conforme elas são escritas em várias folhas de estilo. Por outro lado, o painel Elementos > Calculado lista os valores CSS resolvidos que o Chrome usa para renderizar um elemento:
- CSS derivado da herança
- Vencedores da Cascade
- Propriedades longas (exata), não abreviação (concisa)
- Valores calculados, por exemplo,
font-size: 14pxem vez defont-size: 70%
Entender o CSS no painel calculado
O painel Calculado também mostra várias propriedades de maneira diferente.
Declarados e herdados
O painel Calculado lista as propriedades declaradas em qualquer folha de estilo com fonte regular, tanto a do próprio elemento quanto a herdada. Clique no ícone de expansão 
ao lado delas para ver a origem delas.
Para ver a declaração no painel Estilos, passe o cursor sobre a propriedade expandida e clique no botão de seta 
.
Para ver a declaração no painel Origens, clique no link para o arquivo de origem.
Para propriedades com várias origens, o painel Calculado mostra primeiro o vencedor da Cascade.
Ambiente de execução
O painel Calculado lista valores de propriedades calculados no momento da execução em texto em branco.
Neste exemplo, o Chrome calculou o seguinte para o elemento <ul>:
- O
widthé relativo ao pai,<div> - O
heightem relação aos filhos, os dois elementos<li>
Não herdadas e personalizadas
Para que o painel Calculado mostre todas as propriedades e os respectivos valores, marque 
Mostrar tudo. Todas as propriedades incluem:
- Valores iniciais para propriedades não herdadas em pale text.
- Propriedades personalizadas: com um prefixo
--em texto normal. Essas propriedades são herdadas por padrão.
Para dividir essa lista grande em categorias, marque 
Grupo.
Este exemplo mostra os valores iniciais de propriedades não herdadas em Animação e propriedades personalizadas em Variáveis CSS.
Pesquisar duplicatas
Para investigar uma propriedade específica e as possíveis duplicatas, digite o nome da propriedade na caixa de texto Filtro. É possível fazer isso nos painéis Styles e Computed.
Consulte Pesquisar e filtrar o CSS de um elemento.
Encontrar CSS não utilizado
Consulte Cobertura: encontre JavaScript e CSS não utilizados.