Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
Use a ferramenta Exibição 3D para depurar problemas de DOM, z-index e camada composta em uma página da Web girando a página no espaço 3D. A visualização 3D ajuda você a entender a hierarquia da árvore DOM, a hierarquia da árvore de contexto de empilhamento de índice z e as camadas compostas criadas na página.
À esquerda, a ferramenta Exibição 3D tem 3 guias:
- A guia Camadas Compostas mostra as camadas compostas criadas pelo navegador para sua página da Web. Cada camada inclui uma renderização realista do conteúdo na camada, para uma experiência abrangente à medida que você move a página no espaço 3D.
- A guia Z-index mostra uma representação 3D da árvore de contexto de empilhamento. Use esta guia para depurar problemas de empilhamento de z-index em sua página da Web.
- A guia DOM mostra uma representação 3D da árvore DOM. Use esta guia para explorar o DOM como um todo, com todos os elementos facilmente acessíveis.
À direita, a tela 3D representa a página da Web de acordo com a guia e as opções selecionadas.
Vídeo: Depurar a Web em 3D
Abrir a ferramenta Exibição 3D
Você pode abrir a ferramenta Exibição 3D na Barra de Atividades ou no painel Visualização Rápida .
Para obter o máximo de espaço na tela, abra a ferramenta Modo de exibição 3D na Barra de atividades.
Para usar as ferramentas Elementos e a ferramenta Exibição 3D ao mesmo tempo, abra a ferramenta Exibição 3D no painel Visualização rápida . Isso permite que você visualize os elementos da árvore DOM representados na tela 3D. Esse é o padrão; no Menu de Comando, Mostrar Exibição 3D é indicado como abertura no painel Visualização Rápida .
Abra a ferramenta Modo de Exibição 3D na Barra de Atividades
Abra a página da Web que você deseja visualizar em 3D. Por exemplo, use a página de demonstração do abrigo de animais .
Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.
No DevTools, na Barra de Atividades, selecione a guia Modo de Exibição 3D . Se essa guia não estiver visível, clique no botão Mais ferramentas (
). A guia Modo de Exibição 3D é aberta na Barra de Atividades:
Abra a ferramenta Exibição 3D no painel Visualização rápida
Abra a página da Web que você deseja visualizar em 3D. Por exemplo, use a página de demonstração do abrigo de animais .
Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.
Se o painel de Visualização Rápida não for exibido, selecione Personalizar e controlar o DevTools(...) e, em seguida, selecione Alternar painel de Visualização Rápida. Ou, quando o foco estiver no DevTools, pressione Esc.
Na barra de ferramentas Visualização rápida , selecione a guia Exibição 3D . Se essa guia não estiver visível, clique no botão Mais ferramentas (
). A guia Exibição 3D é aberta no painel Visualização rápida :
Aplicar zoom, panorâmica e rotação da tela 3D
Para exibir a página da Web de diferentes ângulos, você pode ampliar, deslocar e girar a tela 3D exibida no lado direito da ferramenta Exibição 3D .
Ampliar ou reduzir a página
Para ampliar ou reduzir a página da Web na tela 3D, use a roda de rolagem do mouse ou use o controle deslizante no canto inferior direito.
Exibição panorâmica (botão)
Para deslocar a página para a esquerda, para a direita, para cima ou para baixo, clique no botão Exibição panorâmica (
) e arraste a página na tela 3D na direção desejada com o mouse.
Girar modo de exibição (botão)
Para girar a página usando o mouse, clique no botão Girar modo de exibição (
) e arraste a página na tela 3D no ângulo desejado com o mouse.
Para girar a página usando o teclado, clique na tela 3D para colocar o foco nela de modo que uma borda preta apareça e pressione as teclas de direção.
- Para girar a página horizontalmente, pressione a tecla Seta para a esquerda ou Seta para a direita .
- Para girar a página verticalmente, pressione a tecla de Seta para cima ou Seta para baixo .
As teclas giram a página, independentemente de o modo de exibição Panorâmica ou o botão Girar exibição estar selecionado na barra de ferramentas.
Para obter mais informações, confira estas outras seções nesta página:
A guia Camadas Compostas
Na exibição Camadas compostas, a tela 3D exibe a lista de camadas criadas pelo mecanismo de renderização do navegador para a página da Web.
Use o modo de exibição Camadas Compostas para analisar quantas camadas são criadas pelo seu código CSS, qual o tamanho e a frequência com que são alteradas.
Na tela 3D à direita, selecione um elemento da página da Web. Na guia Camadas Compostas , a árvore de camadas se expande automaticamente e a guia Detalhes abaixo da árvore de camadas mostra informações sobre a camada selecionada:
Scroll rects lentos (caixa de seleção)
A caixa de seleção Scroll rects lentos realça as seções da página que causam rolagem lenta. Essa caixa de seleção é útil para investigar problemas de desempenho. Determinadas páginas da Web usam JavaScript para detectar a rolagem (ou toque) em determinados elementos da página de uma maneira que pode tornar a rolagem pela página da Web mais lenta do que normalmente seria.
Essa caixa de seleção realça (em rosa) as caixas da página da Web renderizadas que podem causar esses problemas de desempenho.
Esta caixa de seleção é semelhante à caixa de seleção Problemas de desempenho de rolagem na ferramenta Renderização , que realça os rectos lentos na página diretamente (em amarelo). Consulte Localizar problemas de desempenho de rolagem em tempo real em Referência de recursos de desempenho. Ambas as caixas de seleção se baseiam nas mesmas informações de depuração, mas essas duas ferramentas apresentam essas informações de maneira diferente.
Tintas (caixa de seleção)
Renderiza o conteúdo da página da Web (arquivo de cor ou imagem) para os elementos.
Árvore expansora de camadas
Expanda esta árvore para exibir a lista de camadas compostas. Clique em uma camada para exibir informações detalhadas sobre ela no painel de informações Detalhes .
Detalhes (painel de informações)
O painel de informações Detalhes abaixo do painel Camadas Compostas contém os campos a seguir.
Size
A largura e, em seguida, a altura da camada composta selecionada, juntamente com a localização da parte superior esquerda da camada em relação à parte superior esquerda da janela de visualização da página. Por exemplo, "1034 x 28055 (em 0, 0)".
Razões de composição
Razões pelas quais o mecanismo de renderização do navegador criou a camada. Por exemplo: "Camada secundária, para abrigar o conteúdo que pode ser rolado".
Estimativa de memória
A memória consumida para a camada selecionada. Por exemplo: "116 MB".
Contagem de tintas
Quantas vezes a camada selecionada foi pintada pelo mecanismo de renderização.
A guia Z-index
A guia Z-index mostra apenas os elementos da página da Web que estão empilhando contextos ou que estão posicionados ao longo do eixo z:
Para saber mais, consulte Contexto de empilhamento e Usando o z-index no MDN.
Mostrar Tipo de elementos (seção)
A seção Mostrar tipo de elementos na guia Z-index controla quais elementos da página são mostrados na tela 3D.
O botão de opção Mostrar tudo mostra os elementos de contexto de empilhamento e os elementos que estão posicionados no eixo z. Essa exibição é útil para depurar problemas com elementos que estão posicionados incorretamente no eixo z.
O botão de opção Mostrar apenas contextos de empilhamento mostra apenas os elementos da página que estão empilhando contextos. Essa exibição é útil para descobrir rapidamente quais elementos estão empilhando contextos na página da Web.
A caixa de seleção Mostrar rótulos de z-index mostra ou oculta os rótulos de z-index na tela 3D. Por padrão, essa caixa de seleção está marcada.
Tipo de cor (seção)
Na guia Z-index , você pode escolher entre os seguintes esquemas de cores para visualizar o DOM na tela 3D:
Botão de opção Roxo para Branco - A tela 3D mostra elementos que variam de roxo a branco.
Usar botão de opção Usar cor da tela de fundo - A tela 3D mostra elementos renderizados usando a cor da tela de fundo definida para cada elemento.
Esses botões de opção permitem alternar entre as opções e escolher o tipo de cor. O tipo de cor é mais apropriado para seu projeto ou para um que você mais goste. Os rótulos de z-index adicionam informações visuais na tela 3D, portanto, de acordo com os comentários dos usuários, há menos opções de cores na guia Z-index do que na guia DOM .
A guia DOM
A guia DOM fornece uma exibição geral de depuração da árvore DOM. A guia DOM mostra todos os elementos da página da Web na tela 3D:
As coordenadas X e Y de um elemento na tela 3D correspondem às coordenadas do elemento na página da Web. A coordenada Z de um elemento é baseada em quão profundamente aninhado o elemento está na árvore DOM.
Nível de aninhamento para página (controle deslizante)
O controle deslizante controla quantos níveis da árvore DOM são exibidos na tela 3D. O valor exibido ao lado do controle deslizante indica a profundidade máxima dos elementos exibidos na tela 3D. Arrastar o controle deslizante para a esquerda faz com que as camadas mais externas se desgarrem até ficarem com um nível de aninhamento definido como 1, que exibe apenas o elemento mais distante no DOM. Para remover parte do clutter, arraste o controle deslizante para ver mais de perto o que está acontecendo nos níveis inferiores.
Botão de reinicialização
Redefine o nível de aninhamento do controle deslizante de página para o valor padrão da página.
Tipo de cor (seção)
Na guia DOM , você pode escolher entre os seguintes esquemas de cores para visualizar o DOM na tela 3D:
Botão de opção Roxo para Branco - A tela 3D mostra elementos que variam de roxo a branco.
Botão de opção Azul para Amarelo - A tela 3D mostra elementos que variam de azul a amarelo.
Botão de opção Arco-íris - A tela 3D mostra elementos como roxo, azul, verde, amarelo, laranja e vermelho.
Usar o botão de opção de textura de tela - Renderiza o conteúdo da página da Web (arquivo de cor ou imagem) nos elementos.
Usar botão de opção Usar cor da tela de fundo - A tela 3D mostra elementos renderizados usando a cor da tela de fundo definida para cada elemento.
Barra de ferramentas acima da tela 3D
Repetir o snapshot (botão)
Clique no botão Refazer snapshot (
) na guia DOM ou na guia Z-index para atualizar a representação 3D da árvore DOM ou da árvore de contexto de empilhamento para corresponder à janela de visualização da página da Web mais recente. Por exemplo, depois de tornar o visor mais estreito ou ao alternar para uma exibição de Emulação de dispositivo, por Emular dispositivos móveis (Emulação de dispositivo).
Quando a guia Camadas compostas é selecionada, esse botão é omitido, pois a retomada do snapshot acontece automaticamente quando você redimensiona a janela de exibição.
Redefinir exibição (botão)
Clique no botão Redefinir modo de exibição (
') para redefinir o movimento panorâmico e a rotação da página.
Exibição panorâmica (botão)
Para deslocar a página para a esquerda, para a direita, para cima ou para baixo, clique no botão Exibição panorâmica () e arraste a página na tela 3D na direção desejada com o mouse.
Girar modo de exibição (botão)
Para girar a página usando o mouse, clique no botão Girar modo de exibição () e arraste a página na tela 3D no ângulo desejado com o mouse.
Para girar a página usando o teclado, clique na tela 3D para colocar o foco nela de modo que uma borda preta apareça e pressione as teclas de direção.
- Para girar a página horizontalmente, pressione a tecla Seta para a esquerda ou Seta para a direita .
- Para girar a página verticalmente, pressione a tecla de Seta para cima ou Seta para baixo .
As teclas giram a página, independentemente de o modo de exibição Panorâmica ou o botão Girar exibição estar selecionado na barra de ferramentas.
Isolar elemento selecionado (botão e seção)
Em vez de mostrar todos os elementos DOM da página na tela 3D, você pode se concentrar em exibir apenas uma parte do DOM.
Selecione um elemento da página da Web na tela 3D e clique no botão Isolar elemento selecionado . A tela 3D exibe o elemento selecionado e os pais ou filhos do elemento, sem exibir o restante dos elementos da página.
Use esse botão para exibir o elemento selecionado na tela 3D, reduzindo a confusão que páginas da Web complexas podem criar na tela 3D.
Incluir pais (caixa de seleção)
A caixa de seleção Incluir pais controla se os elementos pai de um elemento de página selecionado são exibidos na tela 3D. A caixa de seleção Incluir pais está ativada por padrão. Quando essa caixa de seleção estiver marcada, para exibir um elemento e qualquer um de seus elementos pai na tela 3D, selecione um elemento na tela 3D ou na ferramenta Elementos e clique no botão Isolar elemento selecionado .
Essa caixa de seleção é exibida quando a guia Z-index ou DOM é selecionada.
Incluir filhos (caixa de seleção)
A caixa de seleção Incluir filhos só é mostrada quando a guia DOM é selecionada.
Para exibir apenas o elemento DOM selecionado, juntamente com pais e filhos do elemento:
- Marque as caixas de seleção Incluir pais e Incluir filhos e, em seguida, clique no botão Isolar elemento selecionado . Esse é o padrão.
Para exibir apenas o elemento DOM selecionado, juntamente com os elementos pai do elemento, mas não os elementos filho do elemento:
- Marque a caixa de seleção Incluir pais , desmarque a caixa de seleção Incluir filhos e clique no botão Isolar elemento selecionado .
Para exibir apenas o elemento DOM selecionado, juntamente com os elementos filho do elemento, mas não os elementos pai do elemento:
- Desmarque a caixa de seleção Incluir pais , marque a caixa de seleção Incluir filhos e clique no botão Isolar elemento selecionado .
Para exibir somente o elemento DOM selecionado, sem seus elementos pai ou filho:
- Desmarque a caixa de seleção Incluir pais e Incluir filhos e clique no botão Isolar elemento selecionado .
Controles de movimento no canto inferior direito
Os controles no canto inferior direito da tela 3D funcionam da mesma forma, independentemente da guia selecionada.
Controle deslizante de zoom - Isso aumenta ou reduz a página, da mesma forma que a roda de rolagem do mouse ou arrastando dois dedos pelo touchpad.
Botão para cima - Move a página para cima, em relação ao sistema de coordenadas da página.
Botão para baixo - Move a página para baixo, em relação ao sistema de coordenadas da página.
Botão esquerdo - Move a página para a direita, em relação ao sistema de coordenadas da página.
Botão direito - Move a página para a esquerda, em relação ao sistema de coordenadas da página.