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 Renderização nesta demonstração e marque Destacar frames de anúncios.
  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 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.

Para emular uma página em foco:

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

  2. Na página, abra a guia Renderização, marque e desmarque a opção Emular 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 Elementos > Estilos.

Desativar fontes locais

Verifique se as alternativas de fontes locais funcionam como esperado desativando as fontes local() nas regras @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 de carregamento de fontes da Web
  • Verifique se as regras @font-face do CSS estão corretas
  • Descobrir as diferenças entre fontes da Web e as versões locais delas
O Chrome vai renderizar essa frase em Courier New se encontrar essa fonte no seu dispositivo.

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

  1. Inspecione a frase acima, abra Elementos > Calculado, role até o final e, em Fontes renderizadas, descubra que o Chrome encontrou Courier New em arquivos locais.

    Fontes renderizadas: locais

  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

Veja como seu site pode ficar no modo escuro mesmo que você não tenha implementado esse recurso.

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 optado por temas escuros no sistema operacional.

Para ativar o modo escuro automático:

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

Modo escuro automático ativado

.

Emular deficiências visuais

Todos devem ser capazes de acessar e aproveitar a Web. O Google está comprometido em transformar isso em realidade.

Com o Chrome DevTools, você pode saber como as pessoas com deficiências visuais veem seu site e, assim, pode aprimorá-lo. Para saber mais, consulte Como simular deficiências de visão de cores.

Para emular deficiências visuais:

  1. Abra a guia Renderização.

  2. Em Emular deficiências visuais, selecione uma das seguintes opções na lista suspensa:

    • Sem emulação.
    • Visão borrada.
    • Contraste reduzido.
    • Protanopia (sem vermelho). Baixa percepção de 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 da visão de cores.

Tritanopia selecionada (sem azul).

Desativar formatos de imagem AVIF e WebP

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

Suponha que você tenha o seguinte código HTML para veicular 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 Rendering e marque Desativar formato de imagem AVIF.
  2. Atualize a página e passe o cursor sobre img src. O src atual da imagem (currentSrc) é agora a imagem WebP substituta.

Emular tipos de imagem

Da mesma forma, é possível desativar imagens WebP.