Visão geral da guia "Renderização"
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
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:
Abra o DevTools .
Pressione Command +Shift +P (Mac) ou
Control +Shift +P (Windows, Linux e ChromeOS) para abrir o
Menu de comando .
Comece a digitar rendering, selecione Show Rendering e pressione Enter .
O DevTools exibe a guia Rendering na parte inferior da janela do DevTools.
Importante :além de abrir a guia Renderização , você também pode usar o menu "Command" para pesquisar e ativar qualquer opção. Tente digitar um nome de opção, por exemplo, emulate.Como alternativa, abra a guia Rendering das seguintes maneiras:
Pressione Esc para abrir a gaveta e, no canto superior esquerdo, clique em Mais ferramentas Renderização .
No canto superior direito, clique em More Options More Tools > Rendering .
Exceto em caso de indicação contrária, o conteúdo desta página é licenciado de acordo com a Licença de atribuição 4.0 do Creative Commons , e as amostras de código são licenciadas de acordo com a Licença Apache 2.0 . Para mais detalhes, consulte as políticas do site do Google Developers . Java é uma marca registrada da Oracle e/ou afiliadas.
Última atualização 2022-04-13 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Não contém as informações de que eu preciso"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Muito complicado / etapas demais"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Desatualizado"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problema na tradução"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Problema com as amostras / o código"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Outro"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Fácil de entender"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Meu problema foi resolvido"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Outro"
}]
{"lastModified": "\u00daltima atualiza\u00e7\u00e3o 2022-04-13 UTC."}
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2022-04-13 UTC."],[],[]]
> Renderização.
> More Tools > Rendering.