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 Rendering nesta demonstração e marque a opção Highlight ad frames.
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 o DevTools, alguns elementos de sobreposição vão se ocultar 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, depois marque e desmarque a opção Emulate uma página em foco.

   

Você também pode encontrar a mesma opção no botão :hov na barra de ações em Elements > Styles.

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

Quando você desativa as fontes locais, fica mais fácil:

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

Emule origens local() ausentes nas regras de @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 introduziu 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 Emulate vision deficiências, selecione uma das seguintes opções na lista suspensa:

   • Sem emulação.
   • Visão desfocada.
   • 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 do azul; confusão entre verde e azul.
   • Acromatopsia (sem cor): Ausência parcial ou total da visão das cores.

Desativar os formatos de imagem AVIF e WebP

Essas emulações facilitam que os desenvolvedores testem diferentes cenários de carregamento de imagens sem precisar mudar 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, da mesma forma, 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 as imagens WebP.