Descubra novos fluxos de trabalho nesta referência abrangente de recursos do Chrome DevTools relacionados à visualização e mudança de CSS.
Consulte Visualizar e alterar o CSS para aprender as noções básicas.
Selecione um elemento
O painel Elementos do DevTools permite visualizar ou mudar o CSS de um elemento por vez.
Na captura de tela, o elemento h1
destacado em azul na Árvore DOM é o elemento selecionado.
À direita, os estilos do elemento são mostrados na guia Estilos. À esquerda, o elemento é
destacado na janela de visualização, mas apenas porque o mouse está passando sobre ele na DOM
Tree.
Consulte Visualizar o CSS de um elemento para acessar um tutorial.
Há muitas maneiras de selecionar um elemento:
- Na janela de visualização, clique com o botão direito do mouse no elemento e selecione Inspecionar.
- No DevTools, clique em Select an element ou pressione Command+Shift+C (Mac) ou Control+Shift+C (Windows, Linux) e clique no elemento na janela de visualização.
- No DevTools, clique no elemento na Árvore DOM.
- No DevTools, execute uma consulta como
document.querySelector('p')
no Console, clique com o botão direito do mouse no resultado e selecione Revelar no painel Elements.
Acessar CSS
Use as guias Elementos > Estilos e Calculado para conferir regras de CSS e diagnosticar problemas de CSS.
Navegar com links
A guia Estilos exibe links em diversos lugares para diversos outros lugares, incluindo, mas não se limitando a:
- Ao lado das regras de CSS, até as folhas de estilo e as origens de CSS. Esses links abrem o painel Fontes. Se a folha de estilos estiver reduzida, consulte Tornar um arquivo reduzido legível.
- Nas seções Herdado de ..., para elementos pai.
- Em chamadas
var()
, para declarações de propriedade personalizada. - Em propriedades abreviadas do
animation
, para@keyframes
. - Links Saiba mais nas dicas da documentação.
- e muito mais.
Estes são alguns deles em destaque:
Os links podem ser estilizados de forma diferente. Se você não tiver certeza se algo é um link, clique nele para descobrir.
Confira dicas com a documentação CSS, especificidade e valores de propriedade personalizada
Quando você passa o cursor sobre elementos específicos, a opção Elementos > Estilos mostra dicas com informações úteis.
Conferir a documentação do CSS
Para ver uma dica com uma breve descrição de CSS, passe o cursor sobre o nome da propriedade na guia Estilos.
Clique em Saiba mais para acessar uma Referência CSS do MDN sobre essa propriedade.
Para desativar as dicas, marque Não mostrar.
Para reativar, acesse Configurações > Preferências > Elementos > Mostrar dica de documentação do CSS.
Ver especificidade do seletor
Passe o cursor sobre um seletor para ver uma dica com o peso da especificidade dele.
Conferir os valores das propriedades personalizadas
Passe o cursor sobre um --custom-property
para ver o valor dele em uma dica.
Ver CSS inválido, modificado, inativo e outros CSSs
A guia Estilos reconhece vários tipos de problemas de CSS e os destaca de maneiras diferentes.
Consulte Entender o CSS na guia "Estilos".
Mostrar apenas o CSS que realmente foi aplicado a um elemento
A guia Estilos mostra todas as regras que se aplicam a um elemento, incluindo as declarações que foram substituídas. Quando você não tiver interesse em declarações substituídas, use a guia Calculado para conferir apenas o CSS que está sendo aplicado a um elemento.
- Selecione um elemento.
- Acesse a guia Calculado no painel Elementos.
Marque a caixa de seleção Mostrar tudo para mostrar todas as propriedades.
Consulte Entender o CSS na guia "Calculado".
Exibir propriedades CSS em ordem alfabética
Use a guia Calculado. Consulte Visualizar apenas o CSS que é realmente aplicado a um elemento.
Mostrar propriedades CSS herdadas
Marque a caixa de seleção Mostrar tudo na guia Calculado. Consulte Visualizar apenas o CSS que foi realmente aplicado a um elemento.
Como alternativa, role a guia Estilos e encontre seções com o nome Inherited from <element_name>
.
Acessar CSS nas regras
As regras são instruções CSS que permitem controlar o comportamento do CSS. Elementos > Estilos: mostra as seguintes regras em seções dedicadas:
Ver @property
nas regras
A at-rule CSS @property
permite definir propriedades personalizadas do CSS explicitamente e registrá-las em uma folha de estilo sem executar JavaScript.
Passe o cursor sobre o nome dessa propriedade na guia Estilos para conferir uma dica com o valor e os descritores da propriedade, além de um link para o registro na seção @property
recolhível na parte de baixo da guia Estilos.
Para editar uma regra @property
, clique duas vezes no nome ou no valor dela.
Ver @supports
nas regras
A guia Estilos mostra as regras CSS @supports
aplicadas a um elemento. Por exemplo, inspecione o seguinte elemento:
Se o navegador for compatível com a função lab()
, o elemento será verde. Caso contrário, será roxo.
Ver @scope
nas regras
A guia Estilos mostra em regras @scope
de CSS se elas forem aplicadas a um elemento.
As novas nas regras @scope
fazem parte da especificação CSS Nível 6 de herança e cascata. Essas regras permitem definir o escopo de estilos CSS, ou seja, aplicar os estilos de forma explícita a elementos específicos.
Confira a regra @scope
nesta visualização:
- Inspecione o texto no card na visualização.
- Na guia Estilos, encontre a regra
@scope
.
Neste exemplo, a regra @scope
substitui a declaração CSS background-color
global para todos os elementos <p>
dentro de elementos com uma classe card
.
Para editar a regra @scope
, clique duas vezes nela.
Ver @font-palette-values
nas regras
A at-rule CSS do @font-palette-values
permite personalizar os valores padrão da propriedade font-palette
. Elementos > Estilos mostra isso em uma seção dedicada.
Confira a seção @font-palette-values
na próxima visualização:
- Inspecione a segunda linha de texto na visualização.
- Em Estilos, encontre a seção
@font-palette-values
.
Neste exemplo, os valores da paleta de fontes --New
substituem os padrão da fonte colorida.
Para editar os valores personalizados, clique duas vezes neles.
Ver @position-try
nas regras
A regra CSS @position-try
e a propriedade position-try-options
permitem definir posições alternativas de âncora para elementos. Para saber mais, consulte Introdução à API CSS anchor position.
Elementos > Estilos resolve valores position-try-options
e vincula cada opção a uma seção @position-try --name
dedicada.
Inspecione os valores position-try-options
e as seções @position-try
na próxima visualização:
- Na visualização, abra o submenu, ou seja, clique em SUA CONTA e depois em VITRINE.
- Inspecione o elemento com
id="submenu"
na visualização. - Em Estilos, encontre a propriedade
position-try-options
e clique no valor--bottom
. A guia Styles leva você para a seção@position-try
correspondente.
Para editar valores na seção, clique duas vezes neles.
Ver o modelo de caixa de um elemento
Para conferir o modelo de caixa de um elemento, acesse a guia Estilos e clique no botão Mostrar barra lateral na barra de ações.
Para alterar um valor, clique duas vezes nele.
Pesquisar e filtrar o CSS de um elemento
Use a caixa Filtro nas guias Estilos e Calculado para pesquisar propriedades ou valores de CSS específicos.
Para pesquisar também propriedades herdadas na guia Calculado, marque a caixa de seleção Mostrar tudo.
Para navegar na guia Calculado, marque Grupo para agrupar as propriedades filtradas em categorias recolhíveis.
Emular uma página em foco
Se você mudar o foco da página para o DevTools, alguns elementos de sobreposição serão ocultados automaticamente se forem acionados pelo foco. Por exemplo, listas suspensas, menus ou seletores de data. A opção check_box Emular uma página em foco permite depurar esse elemento como se ele estivesse em foco.
Tente emular uma página em foco nesta página de demonstração:
- Focar o elemento de entrada. Outro elemento aparece abaixo dele.
- Abra o DevTools. A janela do DevTools agora está em foco em vez da página, então o elemento desaparece novamente.
- Em Elementos > Estilos, clique em :hov, marque check_box Emular uma página em foco e confira se o elemento de entrada está selecionado. Agora é possível inspecionar o elemento abaixo dele.
Também é possível encontrar a mesma opção no painel Renderização.
Alternar uma pseudoclasse
Para alternar uma pseudoclasse, como :active
, :focus
, :focus-within
, :target
, :hover
, :visited
ou focus-visible
:
- Selecione um elemento.
- No painel Elementos, acesse a guia Estilos.
- Clique em :hov.
- Marque a pseudoclasse que você quer ativar.
Na janela de visualização, é possível notar que o DevTools aplica a declaração background-color
ao elemento, mesmo que ele não passe o cursor.
Consulte Adicionar um pseudoestado a uma classe para conferir um tutorial interativo.
Ver pseudoelementos de destaque herdados
Os pseudoelementos permitem estilizar partes específicas dos elementos. Os pseudoelementos de destaque são partes do documento com um status "selecionado" e estilizados como "destacado" para indicar esse status para o usuário. Por exemplo, esses pseudoelementos são ::selection
, ::spelling-error
, ::grammar-error
e ::highlight
.
Como mencionado na especificação, quando vários estilos entram em conflito, a cascata determina o estilo vencedor.
Para entender melhor a herança e a prioridade das regras, você pode conferir os pseudoelementos de destaque herdados:
-
Eu herdei o estilo do pseudoelemento de destaque do meu pai. Selecione-me!
Selecione uma parte do texto acima.
Na guia Estilos, role para baixo até encontrar a seção
Inherited from ::selection pseudo of...
.
Conferir camadas em cascata
As camadas em cascata permitem um controle mais explícito dos arquivos CSS para evitar conflitos de especificidade do estilo. Isso é útil para grandes bases de código, sistemas de design e ao gerenciar estilos de terceiros em aplicativos.
Para conferir as camadas em cascata, inspect o próximo elemento e abra Elementos > Estilos.
Na guia Estilos, confira as três camadas em cascata e os estilos delas: page
, component
e base
.
Para conferir a ordem das camadas, clique no nome da camada ou no botão Alternar a visualização de camadas CSS.
Como a camada page
tem a maior especificidade, o plano de fundo do elemento é verde.
Ver uma página no modo de impressão
Para ver uma página no modo de impressão:
- Abra o Command Menu.
- Comece a digitar
Rendering
e selecioneShow Rendering
. - No menu suspenso Emulate CSS Media, selecione print.
Conferir o CSS usado e não utilizado com a guia "Cobertura"
A guia "Cobertura" mostra qual CSS uma página realmente usa.
- Pressione Command + Shift + P (Mac) ou Control + Shift + P (Windows, Linux, ChromeOS) enquanto o DevTools estiver em foco para abrir o menu de comando.
Comece a digitar
coverage
.Selecione Mostrar cobertura. A guia "Cobertura" é exibida.
Clique em Atualizar. A página é recarregada, e a guia Cobertura fornece uma visão geral de quanto CSS (e JavaScript) é usado em cada arquivo carregado pelo navegador.
Verde representa o CSS usado. Vermelho representa CSS não utilizado.
Clique em um arquivo CSS para ver um detalhamento linha por linha do CSS usado na visualização acima.
Na captura de tela, as linhas 55 a 57 e 65 a 67 de
devsite-google-blue.css
não são usadas, enquanto as linhas 59 a 63 são usadas.
Forçar modo de visualização de impressão
Consulte Forçar o DevTools no modo de visualização de impressão.
Copiar CSS
Em um único menu suspenso na guia Estilos, você pode copiar regras, declarações, propriedades e valores CSS separados.
Além disso, é possível copiar as propriedades CSS na sintaxe JavaScript. Essa opção é útil se você estiver usando bibliotecas CSS-in-JS.
Para copiar CSS:
- Selecione um elemento.
- Na guia Elementos > Estilos, clique com o botão direito do mouse em uma propriedade CSS.
Selecione uma das seguintes opções no menu suspenso:
- Copiar a declaração. Copia a propriedade e o valor dela na sintaxe CSS:
css property: value;
- Copiar propriedade. Copia apenas o nome
property
. - Copiar valor. Copia apenas o
value
. - Copiar regra. Copia toda a regra CSS:
css selector[, selector] { property: value; property: value; ... }
- Copie a declaração como JS. Copia a propriedade e o valor dela na sintaxe JavaScript:
js propertyInCamelCase: 'value'
- Copiar todas as declarações. Copia todas as propriedades e os respectivos valores na regra CSS:
css property: value; property: value; ...
Copie todas as declarações como JS. Copia todas as propriedades e os respectivos valores na sintaxe JavaScript: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...
Copiar todas as mudanças de CSS. Copia as mudanças feitas na guia Estilos em todas as declarações.
Exibir o valor calculado. Vai para a guia Calculado.
- Copiar a declaração. Copia a propriedade e o valor dela na sintaxe CSS:
Alterar CSS
Esta seção lista todas as maneiras de mudar o CSS em Elementos > Estilos.
Também é possível:
- Substituir CSS nos carregamentos de página.
- Salve o CSS modificado nas origens locais em um espaço de trabalho.
Adicionar uma declaração CSS a um elemento
Como a ordem das declarações afeta o estilo de um elemento, você pode adicionar declarações de maneiras diferentes:
- Adicione uma declaração in-line. Equivalente a adicionar um atributo
style
ao HTML do elemento. - Adicionar uma declaração a uma regra de estilo.
Qual fluxo de trabalho você deve usar? Na maioria dos cenários, você provavelmente quer usar o fluxo de trabalho de declaração in-line. As declarações inline têm maior especificidade do que as externas. Portanto, o fluxo de trabalho in-line garante que as mudanças entrem em vigor no elemento conforme o esperado. Consulte Tipos de seletor para mais informações sobre a especificidade.
Se você estiver depurando os estilos de um elemento e precisar testar especificamente o que acontece quando uma declaração é definida em locais diferentes, use o outro fluxo de trabalho.
Adicionar uma declaração in-line
Para adicionar uma declaração in-line:
- Selecione um elemento.
- Na guia Estilos, clique entre os colchetes da seção element.style. O cursor foca, permitindo que você insira texto.
- Digite o nome de uma propriedade e pressione Enter.
Digite um valor válido para a propriedade e pressione Enter. Na Árvore DOM, observe que um atributo
style
foi adicionado ao elemento.Na captura de tela, as propriedades
margin-top
ebackground-color
foram aplicadas ao elemento selecionado. Na Árvore DOM, é possível ver as declarações refletidas no atributostyle
do elemento.
Adicionar uma declaração a uma regra de estilo
Para adicionar uma declaração a uma regra de estilo existente:
- Selecione um elemento.
- Na guia Estilos, clique entre os colchetes da regra em que você quer adicionar a declaração. O cursor foca, permitindo que você insira texto.
- Digite o nome de uma propriedade e pressione Enter.
- Digite um valor válido para a propriedade e pressione Enter.
Na captura de tela, uma regra de estilo recebe a nova declaração border-bottom-style:groove
.
Mudar o nome ou o valor de uma declaração
Clique duas vezes no nome ou no valor de uma declaração para mudar. Consulte Alterar valores enumeráveis com atalhos de teclado para saber como incrementar ou diminuir rapidamente um valor em 0, 1, 1, 10 ou 100 unidades.
Alterar valores enumeráveis com atalhos de teclado
Ao editar um valor enumerável de uma declaração, por exemplo, font-size
, é possível usar os seguintes atalhos de teclado para incrementar o valor em um valor fixo:
- Option + seta para cima (Mac) ou Alt + seta para cima (Windows, Linux) para aumentar em 0.1.
- Para cima para alterar o valor em 1 ou em 0, 1 se o valor atual estiver entre -1 e 1.
- Shift + seta para cima para aumentar em 10.
- Shift + Command + seta para cima (Mac) ou Control + Shift + Page Up (Windows, Linux) para incrementar o valor em 100.
A diminuição também funciona. Basta substituir cada instância de Up mencionada anteriormente por Down.
Alterar os valores de comprimento
Você pode usar o ponteiro para alterar qualquer propriedade com comprimento, como largura, altura, preenchimento, margem ou borda.
Para alterar a unidade de comprimento:
- Passe o cursor sobre o nome do bloco e observe que ele está sublinhado.
Clique no nome da unidade para selecionar uma unidade no menu suspenso.
Para alterar o valor do comprimento, siga estas etapas:
- Passe o cursor sobre o valor da unidade. O ponteiro muda para uma seta horizontal de ponta dupla.
Arraste horizontalmente para aumentar ou diminuir o valor.
Para ajustar o valor em 10, mantenha a tecla Shift pressionada ao arrastar.
Adicionar uma classe a um elemento
Para adicionar uma classe a um elemento:
- Selecione o elemento na Árvore DOM.
- Clique em .cls.
- Digite o nome da turma na caixa Adicionar nova turma.
- Pressione Enter.
Emular preferências de tema claro e escuro e ativar o modo escuro automático
Para ativar o modo escuro automático ou emular a preferência do usuário por temas claros ou escuros, faça o seguinte:
- Na guia Elements > Styles, clique em Toggle common render emulations.
Selecione uma das seguintes opções na lista suspensa:
- prefers-color-scheme: light. Indica que o usuário prefere o tema claro.
- prefers-color-scheme: dark. Indica que o usuário prefere o tema escuro.
- Modo escuro automático. Mostra sua página no modo escuro mesmo que ele não tenha sido implementado por você. Além disso, define
prefers-color-scheme
comodark
automaticamente.
Esse menu suspenso é um atalho para as opções Emular recurso de mídia CSS prefers-color-scheme
e Ativar modo escuro automático da guia Renderização.
Alternar uma turma
Para ativar ou desativar uma classe em um elemento:
- Selecione o elemento na Árvore DOM.
- Abra a seção Classes de elementos. Consulte Adicionar uma classe a um elemento. Abaixo da caixa Add New Class estão todas as classes que estão sendo aplicadas a esse elemento.
- Marque a caixa de seleção ao lado da turma que você quer ativar ou desativar.
Adicionar uma regra de estilo
Para adicionar uma nova regra de estilo:
- Selecione um elemento.
- Clique em Nova regra de estilo . O DevTools insere uma nova regra abaixo da regra element.style.
Na captura de tela, o DevTools adiciona a regra de estilo h1.devsite-page-title
após clicar em New Style Rule.
Escolha em qual folha de estilo adicionar uma regra
Ao adicionar uma nova regra de estilo, clique e mantenha pressionada a opção Nova regra de estilo para escolher em qual folha de estilo adicionar a regra.
Alternar uma declaração
Para ativar ou desativar uma única declaração:
- Selecione um elemento.
- Na guia Estilos, passe o cursor sobre a regra que define a declaração. Caixas de seleção aparecem ao lado de cada declaração.
- Marque ou desmarque a caixa de seleção ao lado da declaração. Quando você limpa uma declaração, o DevTools a risca para indicar que não está mais ativa.
Na captura de tela, a propriedade color
do elemento selecionado está desativada.
Editar os pseudoelementos ::view-transition
durante uma animação
Consulte a seção correspondente em Animações.
Para mais informações, consulte Transições suaves e simples com a API View Transitions.
Alinhar itens da grade e o conteúdo deles com o Editor de grade
Consulte a seção correspondente em Inspecionar grade CSS.
Mudar as cores com o Seletor de cores
Consulte Inspecionar e depurar cores em alta definição e não HD com o seletor de cores.
Mudar o valor do ângulo com o relógio de ângulo
O Angle Clock fornece uma GUI para alterar <angle>
s em valores de propriedade CSS.
Para abrir o Relógio de ângulo:
- Selecione um elemento com a declaração de ângulo.
Na guia Estilos, encontre a declaração
transform
oubackground
que você quer mudar. Clique na caixa Visualização de ângulo ao lado do valor do ângulo.Os relógios pequenos à esquerda de
-5deg
e0.25turn
são as visualizações angulares.Clique na visualização para abrir o Relógio de ângulo.
Mude o valor do ângulo clicando no círculo Angle Clock ou role o mouse para aumentar / diminuir o valor em 1.
Há mais atalhos de teclado para mudar o valor do ângulo. Saiba mais nos atalhos de teclado do painel Estilos.
Mudar sombras de caixa e de texto com o Shadow Editor
O Shadow Editor fornece uma GUI para alterar as declarações de CSS text-shadow
e box-shadow
.
Para alterar as sombras com o Shadow Editor:
Selecione um elemento com uma declaração de sombra. Por exemplo, selecione o próximo elemento.
Na guia Styles, encontre um ícone de sombra ao lado da declaração
text-shadow
oubox-shadow
.Clique no ícone de sombra para abrir o Shadow Editor.
Altere as propriedades de sombra:
- Type (somente para
box-shadow
). Escolha Outset ou Inset. - Compensações de X e Y. Arraste o ponto azul ou especifique valores.
- Desfoque. Arraste o controle deslizante ou especifique um valor.
- Spread (somente para
box-shadow
). Arraste o controle deslizante ou especifique um valor.
- Type (somente para
Observe as mudanças aplicadas ao elemento.
Editar animações e tempos de transição com o Editor de easing
O Easing Editor oferece uma GUI para mudar os valores de transition-timing-function
e animation-timing-function
.
Para abrir o Easing Editor:
- Selecione um elemento com uma declaração de função de tempo, como o elemento
<body>
nesta página. - Na guia Styles, encontre o ícone roxo ao lado das declarações
transition-timing-function
eanimation-timing-function
ou da propriedade abreviadatransition
. - Clique no ícone para abrir o Easing Editor:
Usar predefinições para ajustar os horários
Para ajustar a marcação de tempo com um clique, use as predefinições no Editor de easing:
- No Easing Editor, para definir um valor de palavra-chave, clique em um dos botões do seletor:
- linear
- relaxamento
- facilitar
- relaxamento
No Seletor de predefinições, clique nos botões ou para escolher uma das seguintes predefinições:
- Predefinições lineares:
elastic
,bounce
ouemphasized
. - Predefinições de Cubic Bezier:
- Predefinições lineares:
Palavra-chave de velocidade | Predefinição | Bézier cúbico |
---|---|---|
ease-in-out | Para dentro, Seno | cubic-bezier(0.45, 0.05, 0.55, 0.95) |
Fora, quadrático | cubic-bezier(0.46, 0.03, 0.52, 0.96) |
|
De dentro para fora, cúbicos | cubic-bezier(0.65, 0.05, 0.36, 1) |
|
Saída rápida, entrada devagar | cubic-bezier(0.4, 0, 0.2, 1) |
|
De dentro para fora, de trás | cubic-bezier(0.68, -0.55, 0.27, 1.55) |
|
ease-in | In, Seno | cubic-bezier(0.47, 0, 0.75, 0.72) |
In, quadrático | cubic-bezier(0.55, 0.09, 0.68, 0.53) |
|
De dentro, cúbico | cubic-bezier(0.55, 0.06, 0.68, 0.19) |
|
Para dentro, Voltar | cubic-bezier(0.6, -0.28, 0.74, 0.05) |
|
Saída rápida, entrada linear | cubic-bezier(0.4, 0, 1, 1) |
|
ease-out | Fora, Seno | cubic-bezier(0.39, 0.58, 0.57, 1) |
Fora, quadrático | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
|
Fora, cúbico | cubic-bezier(0.22, 0.61, 0.36, 1) |
|
Saída linear, entrada lenta | cubic-bezier(0, 0, 0.2, 1) |
|
Fora, volta | cubic-bezier(0.18, 0.89, 0.32, 1.28) |
Configurar marcações de tempo personalizadas
Para definir valores personalizados para funções de tempo, use os pontos de controle nas linhas:
Para funções lineares, clique em qualquer lugar da linha para adicionar um ponto de controle e arraste-o. Clique duas vezes para remover o ponto.
Para as funções de Bézier cúbica, arraste um dos pontos de controle.
Qualquer mudança aciona uma animação de bola na Visualização na parte superior do editor.
(Experimental) Copiar alterações de CSS
Com esse experimento ativado, a guia Estilos destaca as mudanças de CSS em verde.
Para copiar uma única mudança na declaração de CSS, passe o cursor sobre a declaração destacada e clique no botão Copiar.
Para copiar todas as mudanças de CSS nas declarações de uma só vez, clique com o botão direito do mouse em qualquer declaração e selecione Copiar todas as mudanças de CSS.
Além disso, é possível rastrear as alterações feitas na guia Alterações.