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:
- Abra a guia Renderização desta demonstração e marque Destacar frames de anúncios.
- 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 Emulate uma página em foco permite depurar esse elemento como se ele estivesse em foco.
Para emular uma página em foco:
- Abra uma página com o elemento a ser depurado, por exemplo, o site do YouTube com a barra de pesquisa.
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:
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.
Abra a guia Renderização, marque Desativar fontes locais e atualize a página.
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:
- Nessa página, abra a guia Renderização e marque a opção Ativar o modo escuro automático.
- 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:
- Abra a guia Renderização.
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):
- Abra a guia Renderização e marque Desativar formato de imagem AVIF.
- 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.