O painel Layers ajuda você a entender a composição do seu site e como o navegador renderiza o conteúdo. Analise um diagrama 3D do seu site para identificar problemas de renderização, corrigir bugs de rolagem e otimizar animações.
Visão geral
Use o painel Camadas para fazer o seguinte:
- Visualizar camadas do documento.
- Inspecionar camadas de documentos.
- Definir pontos de interrupção de mudança DOM.
- Visualizar as informações do Paint Profiler.
- Identifique elementos de rolagem lenta.
Abrir o painel "Camadas"
Para abrir o painel Layers, siga estas etapas:
- Abra o DevTools.
- Abra o menu de comando pressionando:
- macOS: Command+Shift+P
- Windows, Linux e ChromeOS: Control + Shift + P
- Comece a digitar
Layers, selecione Mostrar painel de camadas e pressione Enter.
Como alternativa, no canto superior direito, selecione more_vert Mais opções > Mais ferramentas > painel Camadas.
Além disso, o painel Performance permite conferir as camadas de cada frame de uma gravação na guia Layers. Para saber mais, consulte Consultar informações sobre camadas.
Ver camadas do documento
A seção à esquerda do painel Layers lista todas as camadas renderizadas do documento em uma árvore expansível. Essa árvore é atualizada conforme você navega pela página. As camadas são identificadas pelo seletor de CSS ou por um número, seguido pelas dimensões da camada em pixels.
Passe o cursor sobre uma camada para destacá-la na página da Web e no diagrama. Uma dica vai aparecer na página com as seguintes informações:
- Os seletores da camada.
- As dimensões da camada, em pixels.
- Um ícone que representa a grade ou flex do CSS, quando relevante.
Inspecionar camadas de documentos
Clique em uma camada para conferir mais informações no painel Detalhes.
Dependendo da camada, as seguintes informações serão exibidas:
- Tamanho
- Motivos para a composição
- Estimativa de memória
- Contagem de Paint
- Regiões de rolagem lenta
- Restrição de posição fixa
O diagrama mostra como as camadas são empilhadas e organizadas para essa página, incluindo elementos posicionados fora da viewport.
Para mover o diagrama:
- Use WASD para mover o diagrama. Pressione W para mover para cima, A para mover para a esquerda, S para mover para baixo e D para mover para a direita.
- Clique em Modo de movimentação drag_pan ou pressione X e arraste para mover nos eixos X e Y.
- Clique em Modo de rotação 360 ou pressione V e arraste para girar ao longo do eixo Z.
- Clique em "Redefinir transformação" zoom_in_map ou pressione 0 para redefinir o diagrama para a posição original.
- Aumente o zoom pressionando Shift + + ou a roda do mouse para cima.
- Diminua o zoom pressionando Shift + - ou roda do mouse para baixo.
Para ver o elemento DOM correspondente a uma camada no painel Elementos, clique com o botão direito do mouse em uma camada do diagrama ou na árvore de camadas e clique em Revelar no painel Elementos.
Além disso, o painel Camadas oculta algumas camadas que não hospedam nem desenham conteúdo. Para mostrar essas camadas, clique com o botão direito do mouse na árvore de camadas e selecione Mostrar camadas internas.
Definir pontos de interrupção de mudança DOM
O painel Layers permite definir pontos de interrupção de mudança do DOM.
Para definir um ponto de interrupção de mudança DOM, siga estas etapas:
- Clique com o botão direito do mouse em uma camada na árvore de camadas.
- Passe o cursor sobre Break on e selecione Subtree modifications, Attribute modifications ou Node removal.
Encontre uma lista de pontos de interrupção de mudança DOM em:
- Elementos > guia Pontos de interrupção do DOM.
- Seção Sources > DOM Breakpoints que pode ser recolhida.
Para saber mais sobre os tipos de pontos de interrupção, consulte Tipos de pontos de interrupção de mudança do DOM.
Conferir as informações do Paint Profiler
O painel Layers permite conferir informações detalhadas sobre uma camada e renderizar o conteúdo da página da Web no diagrama 3D.
Para ativar o Paint Profiler, siga estas etapas:
- Marque a caixa de seleção check_box Paints na barra de ação.
- Selecione uma camada na árvore de camadas.
- Clique em Paint Profiler na parte de baixo do painel Details. Nem todas as camadas têm essa opção.
A guia Profiler será aberta com registros de pintura e um histograma que representa a distribuição do custo da pintura.
Ativar a opção Paints também vai renderizar a maior parte do conteúdo da página da Web no diagrama.
Identificar elementos de rolagem lenta
Alguns sites usam JavaScript para detectar eventos de rolagem ou toque em elementos de uma forma que pode afetar negativamente a velocidade de rolagem. Para identificar camadas que contêm listeners de eventos relacionados à rolagem que podem prejudicar a performance, clique na caixa de seleção check_box Slow scroll rects.
As camadas que podem causar rolagem lenta são destacadas em rosa.