O Esboçador de Página renderiza a estrutura DOM completa de qualquer página da web como uma sobreposição de árvore visual — diretamente na própria página. Cada elemento HTML recebe uma etiqueta colorida mostrando o nome de sua tag, e a profundidade de aninhamento é revelada por meio de recuo e linhas de conexão. É como visualizar o painel Elements das Ferramentas do Desenvolvedor, mas projetado na página ao vivo.
As Ferramentas do Desenvolvedor do navegador mostram o DOM como uma árvore de texto em um painel lateral, desconectado do layout visual. O Esboçador de Página preenche essa lacuna projetando a estrutura do DOM diretamente na página. Cada elemento recebe um pequeno distintivo colorido mostrando o nome de sua tag (div, section, nav, h1, p, button, etc.), posicionado no canto superior esquerdo do elemento. Os elementos aninhados são recuados visualmente, e a estrutura em árvore é imediatamente aparente. Isso torna incrivelmente fácil entender como uma página é construída à primeira vista — você pode ver que o cabeçalho contém um nav com cinco tags de âncora, o conteúdo principal tem três elementos de seção, cada um contendo artigos, e o rodapé envolve uma div de logotipo e uma lista de links. Tudo sem abrir as Ferramentas do Desenvolvedor ou ler o código-fonte HTML bruto.
Cada elemento visível na página recebe uma sobreposição de distintivo de tag colorida mostrando o nome de sua tag HTML. Desde os elementos html e body mais externos até spans, links e botões individuais — nada fica oculto. A sobreposição renderiza a hierarquia completa dos elementos como um mapa visual.
Cada tipo de elemento recebe uma cor de fundo distinta para seu distintivo. Elementos estruturais (header, main, footer) em azul, navegação em âmbar, títulos em roxo, parágrafos em cinza, links em amarelo, botões em ciano, imagens em rosa. Você pode identificar tipos de elementos por cor sem ler o texto.
Passe o mouse sobre qualquer distintivo de tag para destacar o elemento correspondente com uma sobreposição semitransparente mostrando suas dimensões exatas (largura × altura em pixels). O limite do elemento é contornado e o distintivo torna-se mais proeminente — facilitando a identificação de qual distintivo pertence a qual elemento.
Elementos profundamente aninhados são recuados ainda mais a partir da borda esquerda, tornando as relações de aninhamento imediatamente visíveis. Veja rapidamente se uma página tem muitas divs de wrapper (mais de 5 níveis de profundidade) ou uma estrutura limpa e rasa. Linhas de conexão mostram as relações pai-filho.
As sobreposições são posicionadas de forma absoluta e não afetam o layout da página, a rolagem ou o comportamento do JavaScript. As etiquetas dos distintivos são pequenas e semitransparentes para que você ainda possa ver o conteúdo da página por baixo. Desative instantaneamente para retornar ao normal.
Clique no distintivo de qualquer elemento contêiner para recolher seus filhos, ocultando os distintivos aninhados. Útil para focar em uma seção específica sem ser sobrecarregado por toda a árvore DOM da página. Clique novamente para expandir.
Aterrizou em uma página da web complexa e precisa entender como ela foi construída? O Esboçador de Página mostra toda a hierarquia do DOM à primeira vista — quais seções contêm qual conteúdo, como a navegação está estruturada e onde a área de conteúdo principal começa e termina.
O aninhamento excessivo de divs torna o CSS mais difícil de escrever e as páginas mais lentas para renderizar. Se você vir mais de 6 níveis de distintivos coloridos empilhados uns sobre os outros para um simples bloco de texto, a marcação precisa de simplificação. O Esboçador de Página torna isso imediatamente óbvio.
A página está usando elementos semânticos adequados? Procure por distintivos de header, nav, main, article, section e footer. Se tudo for apenas elementos div, a página carece de estrutura semântica — o que prejudica a acessibilidade, o SEO e a manutenibilidade.
Visite qualquer site bem construído (Stripe, Linear, Vercel) e ative o Esboçador de Página para ver como suas equipes de frontend estruturam seu HTML. Aprenda padrões de layout vendo estruturas DOM do mundo real em páginas de produção.
Use o Esboçador de Página primeiro para identificar quais elementos existem e onde eles estão, depois mude para o CSS Inspector ou Medir Distância para aprofundar-se nos elementos específicos que você identificou.
Abra o dock flutuante do DevSuite Pro e clique no ícone do Esboçador de Página. A ferramenta verifica imediatamente o DOM da página e renderiza distintivos de tag em cada elemento visível.
Distintivos coloridos aparecem no canto superior esquerdo de cada elemento mostrando o nome de sua tag (div, section, h1, p, etc.). A estrutura de aninhamento é visível por meio do recuo e do posicionamento dos distintivos.
Mova o mouse sobre qualquer distintivo para destacar o elemento correspondente. Uma sobreposição semitransparente mostra os limites e as dimensões do elemento. Isso conecta o nome da tag abstrata à sua posição visual na página.
Clique em um distintivo de contêiner para recolher os distintivos de seus filhos. Isso permite que você se concentre em áreas específicas da página sem a confusão visual de elementos profundamente aninhados.
Clique no ícone do Esboçador de Página no dock para remover todas as sobreposições e retornar à visualização normal da página. Nenhum rastro deixado para trás.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 39 ferramentas de desenvolvedor para seu navegador.
