Visão geral da guia "Renderização"

Sofia Emelianova
Sofia Emelianova
GitHub

Confira uma coleção de opções que afetam a renderização de conteúdo da Web nesta visão geral dos recursos da guia Renderização no DevTools.

Visão geral

A guia Renderização ajuda você a:

  • Descubra problemas de desempenho de renderização. Exibição de imagens, mudanças de layout, camadas e blocos, problemas de rolagem, estatísticas de renderização e Core Web Vitals.
  • Emule recursos de mídia CSS. Teste como as páginas são renderizadas com diferentes recursos de mídia CSS sem especificá-los manualmente no seu código ou ambiente de teste.
  • Aplicar outros efeitos úteis. Destaque frames de anúncios, emule o foco em uma página, desative fontes e formatos de imagem locais, ative um tema escuro automático e emule deficiências de visão.

Abrir a guia "Renderização"

Para abrir a guia Renderização, siga estas etapas:

  1. Abra o DevTools.

  2. Pressione Command+Shift+P (Mac) ou Control+Shift+P (Windows, Linux e ChromeOS) para abrir o Menu de comando.

    Menu de comando, renderização

  3. Comece a digitar rendering, selecione Show Rendering e pressione Enter. O DevTools exibe a guia Rendering na parte inferior da janela do DevTools.

Como alternativa, abra a guia Rendering das seguintes maneiras:

  • Pressione Esc para abrir a gaveta e, no canto superior esquerdo, clique em Mais ferramentas Mais > Renderização.
  • No canto superior direito, clique em More Options Mais > More Tools > Rendering.