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

Sofia Emelianova
Sofia Emelianova
GitHub

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.

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 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.

    Emular 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.
O Chrome renderiza esta frase em Courier New se encontrar essa fonte no seu dispositivo.

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.

    Fontes renderizadas: local

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

  3. Observe a frase em Roboto encontrada na Web.

    Fontes renderizadas: recurso de rede

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.

Modo escuro automático ativado

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.

Tritanopia selecionado (sem azul).

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. Atualize a página e passe o cursor sobre o img src. O src da imagem atual (currentSrc) agora é a imagem WebP substituta.

Emular tipos de imagem

Da mesma forma, você pode desativar as imagens WebP.