Exibir sumário de elementos HTML em um site no Chrome

Programas sofisticados de desenvolvimento da Web ajudam a escrever código facilmente do que se você o fizesse sem eles. Além de acelerar o trabalho e ajudar a evitar problemas comuns de sintaxe, eles também são uma ótima ferramenta para iniciantes que podem se sentir sobrecarregados com a quantidade de esforço necessário para escrever uma página HTML simples. Se nada mais, eles podem ajudá-lo a aprender código. A única falha que você pode enfrentar com um programa de desenvolvimento da web, principalmente quando você o usa para aprender a codificar, é como eles não estão equipados para analisar sites no seu navegador. Se sua área de interesse específica for HTML, Estrutura de tópicos HTML5 é uma excelente extensão do Chrome que ajudará você a analisar diferentes elementos HTML em uma página da web. A extensão adiciona um ícone quadrado à barra de URL que, quando clicada, abre uma exibição do índice de todos os cabeçalhos e seções do HTML 5. A extensão também funciona para elementos HTML 4.

Os itens no índice exibidos são clicáveis ​​e a extensão rolará e destacará o elemento que você selecionar. O destaque nem sempre funciona, mas a navegação é totalmente funcional.

A extensão tem suas limitações; ele detectará todos os elementos HTML em praticamente qualquer página, mas o próprio índice é uma história diferente. A tabela baseia-se no código que está sendo gravado de acordo com as especificações HTML 5 apropriadas ou com a estruturação HTML correta. Se o código não estiver em conformidade com eles, a extensão poderá falhar ao carregar um índice aceitável.

Por exemplo; se você usou tabelas para definir o layout da sua página, é provável que você não veja nenhum índice. A razão para isso não passa de código mal escrito, já que os layouts são melhor definidos com CSS e não com tabelas. Por enquanto, você não poderá usar a extensão em arquivos HTML salvos localmente devido a uma pequena limitação à extensão e algo a ver com as permissões do Chrome.

O Outliner HTML5 obviamente não é para o usuário comum; destina-se a desenvolvedores da Web, iniciantes e qualificados. Para iniciantes, deve ser útil ao visualizar o layout de um site em desenvolvimento. Para desenvolvedores qualificados, é uma maneira rápida de navegar entre os elementos em uma página da web e verificar o código por trás de cada um.

Instale o HTML5 Outliner na Chrome Web Store