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 nesta 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 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:
- Abra uma página com o elemento a ser depurado, por exemplo, o site do YouTube na barra de pesquisa.
Na página, abra a guia Renderização, marque e desmarque a opção 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
Emule as origens local()
ausentes nas regras @font-face
:
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.
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
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:
- Nesta página, abra a guia Renderização e marque a opção Ativar modo escuro automático.
- Observe esta página no modo escuro.
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:
- Abra a guia Renderização.
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.
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):
- Abra a guia Rendering e marque Desativar formato de imagem AVIF.
img src
. O src atual da imagem (currentSrc
) é agora a imagem WebP substituta.
Atualize a página e passe o cursor sobre
Da mesma forma, é possível desativar imagens WebP.