Navegue pelas camadas da página da Web, z-index e DOM usando a ferramenta 3D View
Utilize a ferramenta Vista 3D para depurar problemas do DOM, do índice z e da camada composta numa página Web ao rodar a página num espaço 3D. A visualização 3D ajuda-o a compreender a hierarquia de árvore do DOM, a hierarquia da árvore de contexto de pilha de índice z e as camadas compostas criadas na página.
À esquerda, a ferramenta Vista 3D tem 3 separadores:
- O separador Camadas Compostas mostra as camadas compostas que são criadas pelo browser para a sua página Web. Cada camada inclui uma composição realista do conteúdo na camada, para uma experiência abrangente à medida que move a página no espaço 3D.
- O separador Índice Z mostra uma representação 3D da árvore de contexto de pilha. Utilize este separador para depurar problemas de pilha de índice z na sua página Web.
- O separador DOM mostra uma representação 3D da árvore DOM. Utilize este separador para explorar o DOM como um todo, com todos os elementos facilmente acessíveis.
À direita, a tela 3D representa a página Web de acordo com o separador e as opções que selecionar.
Vídeo: Depurar a Web em 3D
Abrir a ferramenta Vista 3D
Pode abrir a ferramenta Vista 3D na Barra de Atividade ou no painel Vista Rápida .
Para obter o máximo espaço em telas, abra a ferramenta Vista 3D na Barra de Atividade.
Para utilizar a ferramenta Elementos e a ferramenta Vista 3D ao mesmo tempo, abra a ferramenta Vista 3D no painel Vista Rápida . Isto permite-lhe ver os elementos da árvore DOM representados na tela 3D. Esta é a predefinição; no Menu de Comandos, Mostrar Vista 3D é indicado como a abertura no painel Vista Rápida .
Abrir a ferramenta Vista 3D na Barra de Atividade
Abra a página Web que pretende visualizar em 3D. Por exemplo, utilize a página de demonstração Abrigo animal.
Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.
Em DevTools, na Barra de Atividade, selecione o separador Vista 3D . Se esse separador não estiver visível, clique no botão Mais ferramentas (
). O separador Vista 3D é aberto na Barra de Atividade:
Abrir a ferramenta Vista 3D no painel Vista Rápida
Abra a página Web que pretende visualizar em 3D. Por exemplo, utilize a página de demonstração Abrigo animal.
Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.
Se o painel Vista Rápida não for apresentado, selecione Personalizar e controlar DevTools (...) e, em seguida, selecione Alternar painel Vista Rápida. Em alternativa, quando o foco estiver no DevTools, prima Esc.
Na barra de ferramentas Vista Rápida , selecione o separador Vista 3D . Se esse separador não estiver visível, clique no botão Mais ferramentas (
). O separador Vista 3D é aberto no painel Vista Rápida :
Ampliar, deslocar e rodar a tela 3D
Para ver a página Web a partir de ângulos diferentes, pode ampliar, deslocar e rodar a tela 3D que é apresentada no lado direito da ferramenta Vista 3D .
Ampliar ou reduzir a página
Para ampliar ou reduzir a página Web na tela 3D, utilize a roda do rato ou utilize o controlo de deslize no canto inferior direito.
Vista panorâmica (botão)
Para deslocar a página para a esquerda, para a direita, para cima ou para baixo, clique no botão Vista de painel (
) e, em seguida, arraste a página na tela 3D na direção pretendida com o rato.
Rodar vista (botão)
Para rodar a página com o rato, clique no botão Rodar vista (
) e, em seguida, arraste a página na tela 3D no ângulo pretendido com o rato.
Para rodar a página utilizando o teclado, clique na tela 3D para colocar o foco na mesma para que seja apresentado um limite preto e, em seguida, prima as teclas de seta.
- Para rodar a página horizontalmente, prima a tecla Seta Para a Esquerda ou Seta Para a Direita .
- Para rodar a página verticalmente, prima a tecla Seta Para Cima ou Seta Para Baixo .
As teclas rodam a página, independentemente de o botão Vista de deslocamento ou Rotação estar selecionado na barra de ferramentas.
Para obter mais informações, consulte estas outras secções nesta página:
O separador Camadas Compostas
Na vista Camadas Compostas, a tela 3D apresenta a lista de camadas criadas pelo motor de composição do browser para a página Web.
Utilize a vista Camadas Compostas para analisar quantas camadas são criadas pelo código CSS, quão grandes são e com que frequência mudam.
Na tela 3D à direita, selecione um elemento da página Web. No separador Camadas Compostas , a árvore de camadas expande-se automaticamente e o separador Detalhes abaixo da árvore de camadas mostra informações sobre a camada selecionada:
Rects de deslocamento lento (caixa de verificação)
A caixa de verificação Deslocamento lento repõe as secções da página que causam deslocamento lento. Esta caixa de verificação é útil para investigar problemas de desempenho. Determinadas páginas Web utilizam JavaScript para detetar deslocamento (ou toque) em determinados elementos de página de uma forma que pode tornar o deslocamento na página Web mais lento do que normalmente poderia ser.
Esta caixa de verificação realça (em cor de rosa) as caixas da página Web composta que podem causar estes problemas de desempenho.
Esta caixa de verificação é semelhante à caixa de verificação Problemas de desempenho de deslocamento na ferramenta de Composição , que realça as reticências lentas na página diretamente (a amarelo). Veja Localizar problemas de desempenho de deslocamento em tempo real na Referência de funcionalidades de desempenho. Ambas as caixas de verificação baseiam-se nas mesmas informações de depuração, mas estas duas ferramentas apresentam estas informações de forma diferente.
Paints (caixa de verificação)
Compõe o conteúdo da página Web (ficheiro de cor ou imagem) nos elementos.
Árvore do expansor de camadas
Expanda esta árvore para apresentar a lista de camadas compostas. Clique numa camada para apresentar informações detalhadas sobre o mesmo no painel Informações de detalhes.
Detalhes (painel de informações)
O painel Informações de detalhes abaixo do painel Camadas Compostas contém os seguintes campos.
Size
A largura e, em seguida, a altura da camada composta selecionada, juntamente com a localização do canto superior esquerdo da camada em relação ao canto superior esquerdo da janela viewport da página. Por exemplo, "1034 x 28055 (a 0, 0)".
Composicionar Motivos
Motivos pelos quais o motor de composição do browser criou a camada. Por exemplo: "Camada secundária, para alojar conteúdos que podem ser percorridos".
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 motor de composição.
O separador Índice Z
O separador Índice Z mostra apenas os elementos da página Web que estão a empilhar contextos ou que estão posicionados ao longo do eixo z:
Para saber mais, veja Stacking context (Contexto de pilha) e Using z-index (Utilizar o z-index ) no MDN.
Mostrar Tipo de elementos (secção)
A secção Mostrar Tipo de elementos no separador índice Z controla os elementos da página que são apresentados na tela 3D.
O botão de opção Mostrar tudo mostra os elementos de contexto de pilha e os elementos que estão posicionados no eixo z. Esta vista é útil para depurar problemas com elementos que estão incorretamente posicionados no eixo z.
O botão de opção Mostrar apenas contextos de pilha mostra apenas os elementos de página que estão a empilhar contextos. Esta vista é útil para descobrir rapidamente que elementos estão a empilhar contextos na página Web.
A caixa de verificação Mostrar etiquetas de índice z mostra ou oculta as etiquetas de índice z na tela 3D. Por predefinição, esta caixa de verificação está selecionada.
Tipo de cor (secção)
No separador Índice Z , pode escolher entre os seguintes esquemas de cores para visualizar o DOM na tela 3D:
Botão de opção Roxo a Branco – a tela 3D mostra elementos que vão do roxo ao branco.
Botão de opção Utilizar cor de fundo – a tela 3D mostra os elementos compostos com a cor de fundo definida para cada elemento.
Estes botões de opção permitem-lhe 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. As etiquetas de índice z adicionam informações visuais na tela 3D, pelo que, por feedback do utilizador, existem menos opções de cor no separador Z-index do que no separador DOM .
O separador DOM
O separador DOM fornece uma vista de depuração geral da árvore DOM. O separador DOM mostra todos os elementos da página Web na tela 3D:
As coordenadas X e Y de um elemento na tela 3D correspondem às coordenadas do elemento na página Web. A coordenada Z de um elemento baseia-se no quão profundamente aninhado o elemento está na árvore DOM.
Nível de aninhamento para a página (controlo de deslize)
O controlo de deslize controla quantos níveis da árvore DOM são apresentados na tela 3D. O valor apresentado junto ao controlo de deslize indica a profundidade máxima dos elementos que são apresentados na tela 3D. Arrastar o controlo de deslize para a esquerda faz com que as camadas mais externas se descasquem até ficar com um nível de aninhamento definido como 1, que apresenta apenas o elemento mais distante no DOM. Para remover alguma da desorganização, arraste o controlo de deslize para ver mais detalhadamente o que está a acontecer nos níveis inferiores.
Botão Repor
Repõe o nível de Aninhamento do controlo de deslize da página para o valor predefinido da página.
Tipo de cor (secção)
No separador DOM , pode escolher entre os seguintes esquemas de cores para visualizar o DOM na tela 3D:
Botão de opção Roxo a Branco – a tela 3D mostra elementos que vão do roxo ao branco.
Botão de opção Azul a Amarelo – a tela 3D mostra elementos que vão do azul ao amarelo.
Botão de opção Arco-íris – a tela 3D mostra elementos como roxo, azul, verde, amarelo, laranja e vermelho.
Botão de opção Utilizar textura do ecrã – compõe o conteúdo da página Web (ficheiro de cor ou imagem) para os elementos.
Botão de opção Utilizar cor de fundo – a tela 3D mostra os elementos compostos com a cor de fundo definida para cada elemento.
Barra de ferramentas acima da tela 3D
Repetir instantâneo (botão)
Clique no botão Retomar instantâneo (
) no separador DOM ou no separador Z-index para atualizar a representação 3D da árvore DOM ou árvore de contexto de pilha para corresponder à viewport da página Web mais recente. Por exemplo, depois de tornar a viewport mais estreita ou quando muda para uma vista de Emulação do Dispositivo, por Emular dispositivos móveis (Emulação do Dispositivo).
Quando o separador Camadas Compostas está selecionado, este botão é omitido porque a repetição do instantâneo ocorre automaticamente quando redimensiona a janela viewport.
Vista de reposição (botão)
Clique no botão Repor vista (
) para repor o painel e a rotação da página.
Vista panorâmica (botão)
Para deslocar a página para a esquerda, para a direita, para cima ou para baixo, clique no botão Vista de painel () e, em seguida, arraste a página na tela 3D na direção pretendida com o rato.
Rodar vista (botão)
Para rodar a página com o rato, clique no botão Rodar vista () e, em seguida, arraste a página na tela 3D no ângulo pretendido com o rato.
Para rodar a página utilizando o teclado, clique na tela 3D para colocar o foco na mesma para que seja apresentado um limite preto e, em seguida, prima as teclas de seta.
- Para rodar a página horizontalmente, prima a tecla Seta Para a Esquerda ou Seta Para a Direita .
- Para rodar a página verticalmente, prima a tecla Seta Para Cima ou Seta Para Baixo .
As teclas rodam a página, independentemente de o botão Vista de deslocamento ou Rotação estar selecionado na barra de ferramentas.
Isolar o elemento selecionado (botão e secção)
Em vez de mostrar todos os elementos DOM da página na tela 3D, pode concentrar-se apenas em apresentar uma parte do DOM.
Selecione um elemento da página Web na tela 3D e, em seguida, clique no botão Isolar elemento selecionado . A tela 3D apresenta o elemento selecionado e os elementos principais ou subordinados do elemento, sem apresentar os restantes elementos da página.
Utilize este botão para apresentar o elemento que selecionou na tela 3D, ao mesmo tempo que reduz a desordem que as páginas Web complexas podem criar na tela 3D.
Incluir encarregados de educação (caixa de verificação)
A caixa de verificação Incluir encarregados de educação controla se os elementos principais de um elemento de página selecionado são apresentados na tela 3D. A caixa de verificação Incluir encarregados de educação está ativada por predefinição. Quando esta caixa de verificação estiver selecionada, para apresentar um elemento e qualquer um dos respetivos elementos principais na tela 3D, selecione um elemento na tela 3D ou na ferramenta Elementos e, em seguida, clique no botão Isolar elemento selecionado .
Esta caixa de verificação é apresentada quando o separador Z-index ou DOM está selecionado.
Incluir subordinados (caixa de verificação)
A caixa de verificação Incluir subordinados só é apresentada quando o separador DOM está selecionado.
Para apresentar apenas o elemento DOM que selecionou, juntamente com pais e filhos do elemento:
- Selecione as caixas de verificação Incluir encarregados de educação e Incluir subordinados e, em seguida, clique no botão Isolar elemento selecionado . Esta é a predefinição.
Para apresentar apenas o elemento DOM que selecionou, juntamente com os elementos principais do elemento, mas não os elementos subordinados do elemento:
- Selecione a caixa de verificação Incluir encarregados de educação, desmarque a caixa de verificação Incluir subordinados e, em seguida, clique no botão Isolar elemento selecionado .
Para apresentar apenas o elemento DOM que selecionou, juntamente com os elementos subordinados do elemento, mas não os elementos principais do elemento:
- Desmarque a caixa de verificação Incluir encarregados de educação, selecione a caixa de verificação Incluir subordinados e, em seguida, clique no botão Isolar elemento selecionado .
Para apresentar apenas o elemento DOM que selecionou, sem os respetivos elementos principais ou subordinados:
- Desmarque a caixa de verificação Incluir elementos principais e Incluir subordinados e, em seguida, clique no botão Isolar elemento selecionado .
Controlos de movimento no canto inferior direito
Os controlos no canto inferior direito da tela 3D funcionam da mesma forma, independentemente do separador que selecionar.
Controlo de deslize de zoom – esta ação amplia ou reduz a página, tal como a roda do rato ou arrasta dois dedos pelo touchpad.
Botão Para Cima – move a página para cima, relativamente ao sistema de coordenadas da página.
Botão Para Baixo - Move a página para baixo, relativamente ao sistema de coordenadas da página.
Botão esquerdo – move a página para a direita, relativamente ao sistema de coordenadas da página.
Botão direito – move a página para a esquerda, relativamente ao sistema de coordenadas da página.