Ferramenta de HTML

1. Ferramentas

As ferramentas de desenvolvedor de IE têm diferentes modos de funcionamento, que se refletem nas abas que podemos ver no “Menu de Modos” do que falamos em um artigo anterior. Na Figura 1 podemos ver este menu de modo ressaltado de vermelho.

 

Cada uma destas abas se corresponde com uma faceta distinta relacionada com o desenvolvimento web. Em Internet Explorer 8 tínhamos abas para HTML, CSS, Script e Profiler, A elas se somaram duas novas abas na última versão de IE, a 9: Console e Network. Vamos dar uma repassada em cada uma delas, para conhecer em profundidade as possibilidades que oferecem aos desenvolvedores.

2. Ferramenta de HTML

A aba HTML permite visualizar a estrutura DOM que Internet Explorer renderizou, a partir da página baixada. A partir desta aba pode ser visto o código de marcado de cada elemento que aparece na página e seus atributos.

Quanto à estrutura desta aba, está composta de um menu específico da aba, um painel primário de conteúdo, um menu para escolher os tipos de propriedades que queremos visualizar, um painel de propriedades e uma caixa de busca. Na Figura 2 podemos ver cada uma destas partes:

 

Na parte superior temos uma barra específica deste modo composta de distintos ícones. Estes ícones, da esquerda para a direita, representam as seguintes funcionalidades:

• O ícone em forma de seta nos permite ativar a ferramenta “select element by click”, da que falamos em um artigo anterior. Esta ferramenta facilita selecionar qualquer elemento da página apenas clicando sobre ele.
• A opção seguinte nos permite limpar a caché do navegador, do mesmo modo que faríamos desde o submenu Caché, opção Clear browser caché.
• O ícone seguinte nos facilita salvar todas as modificações que tenhamos feito sobre a página, em um arquivo local. Do contrario, as perderemos assim que refresquemos a página.
• O ícone seguinte nos permite refrescar a página.
• O seguinte ícone representa uma opção chamada “Element Source with style”, que também podemos acessar a partir do submenu View, opção Source -> Element Source with style. Uma vez selecionado um elemento, pressioná-lo nos abrirá uma nova janela na que poderemos ver o código HTML e as folhas de estilo exclusivamente do elemento, facilitando trabalhar de forma mais precisa.
• O ícone seguinte ativa o modo de edição. Ativando esta opção veremos como o painel primario carregará o código fonte e atuará como editor de texto. Enquanto tenhamos este modo ativado, não é possível refrescar a página com o ícone que vimos anteriormente.
• O último ícone só está ativo enquanto nos encontrarmos no modo de edição. Permite “wrappeo” do texto; ou seja, introduz saltos de linha automáticos para evitar que as linhas ocupem um espaço maior que a área de visualização do painel primário.

Imediatamente abaixo da barra específica da aba podemos encontrar o painel primário de conteúdo. Este painel tem uma dupla função: desenha a árvore DOM, salvo que nos encontremos em modo edição, em cujo caso atua como um mero editor de texto. Na Figura 3 podemos ver este painel mais detalhadamente.

 

Quando o painel não se encontra em modo de edição, podemos usá-lo para percorrer a árvore de elementos da página. Também, quando utilizamos a ferramenta “select element by click, é neste painel onde é mostrada a informação do elemento uma vez selecionada. O painel está sincronizado com o painel de propriedades, de modo que cada vez que se escolhe um novo elemento nele, se atualiza a informação que o painel de propriedades contém com os valores correspondentes a esse elemento.

O menu de escolha de propriedades nos permite escolher que conjunto de propriedades do elemento queremos inspecionar. Existem quatro opções diferentes, que detalhamos a seguir:

• Style: esta janela nos permite ver as regras CSS que estão sendo aplicadas ao elemento que temos selecionado. Aparecem em ordem de menor para maior prioridade, sendo a última da lista a mais prioritária e a que está sendo aplicada. As regras aparecem agrupadas por tipos. No caso de que uma regra esteja eliminada, significa que está sendo sobrescrita por outra regra mais prioritária. Os checkboxs permitem ativar e desativar regras, visualizando-se imediatamente na página as consequências de qualquer mudança. A Figura 4 mostra esta tela.

 

• 
• Trace Styles: esta janela mostra a mesma informação da anterior, porém agrupada por propriedades. Ou seja, para cada propriedade do elemento ao que se deu um valor mediante CSS, poderemos ver a lista de regras que lhe correspondem e como estão sendo aplicadas. Uma grande ajuda que aporta esta janela é que nos permite, para cada regra, ir diretamente ao ponto do arquivo CSS correspondente em que foi definida, só com clicar no link que aparece à direita.
• Layout: esta janela mostra como estão sendo aplicadas as propriedades do elemento relacionadas com o “box model”. Estas propriedades são offset, margin, border e padding. Na Figura 5 se pode ver esta tela.
  
• Attributes: mostra os atributos e os valores do elemento selecionado.

A partir de todas estas janelas se podem realizar modificações em linha dos valores do elemento selecionado. Desta forma podemos ver de forma imediata as consequências de, por exemplo, modificar a cor de background de um botão ou sua propriedade border.

3. Conclusões

Pudemos ver a primeira das ferramentas que nos oferecem as Developer Tools. Em concreto esta ferramenta permite gerenciar tudo relacionado com os elementos HTML da árvore DOM da página web, assim como acessar seus estilos CSS.

Fonte: http://www.criarweb.com/artigos/ferramienta-html.html