Aplique outros efeitos: ative o tema escuro automático, emule o foco e muito mais

Sofia Emelianova

Descubra efeitos úteis para aplicar à sua página com esta referência das opções da guia Renderização.

Destacar frames de anúncios

Para verificar se os frames estão marcados como anúncios:

1. Abra a guia Renderização desta demonstração e marque Destacar frames de anúncios.
2. Observe o frame do anúncio destacado em vermelho.

Emular uma página em foco

Se você mudar o foco da página para 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 Emulate uma página em foco permite depurar esse elemento como se ele estivesse em foco.

Para emular uma página em foco:

1. Abra uma página com o elemento a ser depurado, por exemplo, o site do YouTube com a barra de pesquisa.

2. Na página, abra a guia Renderização, marque e desmarque a opção Emulação de uma página em foco.

   

Também é possível encontrar a mesma opção no botão :hov na barra de ações em Elementos > Estilos.

Para descobrir outras maneiras de congelar um elemento, consulte Congelar a tela e inspecionar elementos que desaparecem.

Desativar fontes locais

Confira se as alternativas de fonte local funcionam como esperado desativando as origens local() nas regras da @font-face.

Muitas vezes, desenvolvedores e designers usam duas cópias diferentes da mesma fonte durante o desenvolvimento:

• Uma fonte local para suas ferramentas de design e
• Uma fonte da Web para seu código

Ao desativar as fontes locais, fica mais fácil:

• Depurar e medir o desempenho e a otimização do carregamento de fontes da Web
• Verificar a correção das regras CSS @font-face
• Descubra as diferenças entre as fontes da Web e as versões locais delas.

Emule as origens local() ausentes nas regras @font-face:

1. Inspecione a frase acima, abra Elements > Computed, role até o fim e, em Rendered Fonts, descubra que o Chrome encontrou Courier New nos arquivos locais.

   

2. Abra a guia Renderização, marque Desativar fontes locais e refresh atualize a página.

3. Observe a frase em Roboto encontrada na Web.

   

Ativar o modo escuro automático

Confira como seu site pode ficar no modo escuro, mesmo que você não tenha implementado.

O Chrome 96 lançou um teste de origem para o tema escuro automático no Android. Com esse recurso, o navegador aplica um tema escuro gerado automaticamente a sites com temas claros se o usuário tiver ativado esses temas no sistema operacional.

Para ativar o modo escuro automático:

1. Nessa página, abra a guia Renderização e marque a opção Ativar o modo escuro automático.
2. Observe esta página no modo escuro.

Emular deficiências visuais

Todo mundo precisa ter acesso e aproveitar a Web. O Google está comprometido em tornar isso uma realidade.

Com o Chrome DevTools, você pode ver como as pessoas com deficiências visuais veem seu site, para que possa melhorá-lo para elas. Para mais informações, consulte Como simular deficiências na visão de cores.

Para emular deficiências visuais:

1. Abra a guia Renderização.

2. Em Emulação de deficiências visuais, selecione uma das seguintes opções no menu suspenso:

   • Sem emulação.
   • Visão borrada.
   • Contraste reduzido.
   • Protanopia (sem vermelho). Baixa percepção do vermelho; confusão de verdes, vermelhos e amarelos.
   • Deuteranopia (sem verde). Baixa percepção do verde confusão de verdes, vermelhos e amarelos.
   • Tritanopia (sem azul). Baixa percepção de azul; confusão de verdes e azuis.
   • Acromatopsia (sem cor). Ausência parcial ou total de visão de cores.

Desativar os formatos de imagem AVIF e WebP

Essas emulações facilitam o teste de diferentes cenários de carregamento de imagens para os desenvolvedores sem precisar trocar de navegador.

Suponha que você tenha o seguinte código HTML para exibir uma imagem nos formatos AVIF e WebP para navegadores mais recentes, com uma imagem PNG substituta para navegadores mais antigos.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

Para desativar todas as imagens AVIF em uma página (ou, de forma semelhante, imagens WebP):

1. Abra a guia Renderização e marque Desativar formato de imagem AVIF.
2. refresh Atualize a página e passe o cursor sobre o img src. O src da imagem atual (currentSrc) agora é a imagem WebP substituta.

Da mesma forma, você pode desativar imagens WebP.