Visualizar tags HTML e página da Web combinadas no Firefox

Deseja uma maneira mais fácil de ver as tags html de uma página da web sem exibir o código-fonte em uma janela separada? Agora você pode visualizar a página da Web e as tags combinadas na mesma janela usando a extensão X-Ray para o Firefox.

Antes

Normalmente, se você quiser ver o código-fonte por trás de uma página da Web, será necessário visualizá-lo em uma janela separada. Se você está interessado apenas em uma seção específica, então você tem que pesquisar através de todo o conjunto de código apenas para encontrar o que você está procurando.

Depois de

A extensão X-Ray permitirá que você veja as tags do documento (incluindo nomes de classe e ID) “lado a lado” com a página da Web na mesma guia. Você pode usar o menu de contexto ou o menu de ferramentas para acessar o comando X-Ray.

Aqui está a mesma seção da página da Web mostrada na primeira captura de tela acima. Pode parecer um pouco estranho no começo até você se acostumar a ver os dois juntos.

Nota: Você pode retornar a página da Web a sua 'visualização normal clicando no comando X-Ray novamente ou atualizando a página.

O código para parte da barra lateral na mesma página da Web…

Seguido por um dos conjuntos de links no final.

Olhando para outro exemplo, suponha que você esteja interessado em saber como parte do feed principal está configurado.

Ser capaz de ver como um determinado elemento é configurado diretamente na página da Web é certamente melhor do que pesquisar em toda a página do código.

Conclusão

Se você cria páginas da Web e deseja uma maneira fácil de ver como o site de outra pessoa é codificado, convém experimentar essa extensão.

Links

Baixe a extensão X-Ray (Complementos do Mozilla)