Compartilhar via

Depurando HTML e CSS com as Ferramentas de Desenvolvimento

  • Artigo

Novidade no Windows Internet Explorer 8

O Internet Explorer 8 fornece Ferramentas de Desenvolvimento avançadas para ajudá-lo a pesquisar e resolver problemas relacionados a HTML, CSS (Folhas de estilos em cascata) e Microsoft JScript. Este artigo concentra-se nas ferramentas HTML e CSS das Ferramentas de Desenvolvimento.

  • Introdução
  • Abrindo e fechando as Ferramentas de Desenvolvimento
  • Selecionando objetos em uma página da Web
  • Inspecionando elementos HTML
    • Usando as ferramentas Estilo e Rastrear Estilos
    • Usando a ferramenta Layout
    • Usando a ferramenta Atributos
  • Inspecionando regras CSS
  • Salvando alterações
  • Resumo
  • Tópicos relacionados

Introdução

O recurso Ferramentas de Desenvolvimento do Internet Explorer 8 permite que você revise a representação interna do navegador de uma página da Web. Você pode usar as Ferramentas de Desenvolvimento para realizar diversas tarefas, incluindo (sem limitação) exibir atributos individuais, determinar por que uma regra CSS específica é aplicada a um elemento individual e visualizar diferentes modos de compatibilidade de documentos. Ao expor como o navegador interpreta uma página da Web, as Ferramentas de Desenvolvimento fornecem várias oportunidades para pesquisar e resolver problemas, e faz isso de maneira mais rápida do que era possível em versões anteriores do Internet Explorer.

Este artigo concentra-se nas Ferramentas de Desenvolvimento HTML e CSS. Para obter informações sobre como usar as Ferramentas de Desenvolvimento para depurar em JScript, consulte Depurando scripts com as Ferramentas de Desenvolvimento (a página pode estar em inglês).

Abrindo e fechando as Ferramentas de Desenvolvimento

Para abrir as Ferramentas de Desenvolvimento, pressione a tecla F12; como alternativa, no menu Ferramentas da barra de ferramentas do Internet Explorer 8, clique em Ferramentas de Desenvolvimento. A imagem a seguir mostra a janela Ferramentas de Desenvolvimento.

Esta figura mostra a localização do botão Ferramentas de Desenvolvimento na barra de ferramentas e do botão Fechar no Internet Explorer 8.
Figura 1. Comando Ferramentas de Desenvolvimento e o botão Fechar.

Após serem iniciadas, as Ferramentas de Desenvolvimento podem ser exibidas em uma janela própria ou fixadas à instância do navegador que as abriu. Cada guia do Internet Explorer tem sua própria instância das Ferramentas de Desenvolvimento. Ao trabalhar com várias instâncias das Ferramentas de Desenvolvimento, use o recurso Fixar - cujo botão é exibido no canto superior direito da janela das Ferramentas de Desenvolvimento - para fixar cada instância das Ferramentas de Desenvolvimento à sua janela. Quando fixada, a janela Ferramentas de Desenvolvimento pode ser redimensionada para exibir uma área de visualização maior.

Você pode fechar as Ferramentas de Desenvolvimento de várias maneiras: pressionando F12, clicando no botão Ferramentas de Desenvolvimento no menu Ferramentas, clicando no botão Fechar no canto superior direito da janela Ferramentas de Desenvolvimento ou fechando a janela do Internet Explorer ou a guia da qual foram abertas.

Selecionando objetos em uma página da Web

Muitas ferramentas de desenvolvimento HTML e CSS funcionam em elementos individuais em uma página da Web. Para selecionar um elemento, realce-o na guia HTML ou clique no botão Selecionar Elemento por Clique no menu Localizar das Ferramentas de Desenvolvimento. Se clicar nesse botão, você poderá usar o mouse para selecionar um elemento em sua página da Web. Mova o cursor sobre um elemento; quando uma caixa azul realçar a borda do elemento, clique para selecioná-lo. A figura a seguir mostra os resultados da seleção de um elemento.

Esta figura mostra o botão Selecionar Elemento por Clique e os resultados da seleção de um elemento.
Figura 3. O botão Selecionar Elemento por Clique e os resultados da seleção de um elemento.

Ao realçar e clicar em um elemento HTML, a guia HTML mostra os atributos do elemento selecionado, juntamente com sua localização na representação interna usada pelo Internet Explorer 8 para exibir a página da Web. Você pode exibir os valores de atributo atuais do elemento e experimentar novos valores usando a guia HTML para alterá-los. Para alterar um valor de atributo, clique nele, insira um novo valor e pressione ENTER; o Internet Explorer 8 exibirá os efeitos de sua alteração. Você pode descartar valores parciais pressionando ESC. Para restaurar a página da Web para a sua aparência original, atualize a página.

Observação  As alterações feitas usando a guia HTML não afetam o código-fonte subjacente de uma página da Web; ele permanece em vigor até que a página da Web seja atualizada ou até que o navegador vá para uma nova página da Web ou seja fechado. Consulte a seção em Salvando alterações a seguir sobre como salvar suas alterações.

Inspecionando elementos HTML

A guia HTML o ajuda a inspecionar a apresentação de elementos HTML em uma página da Web. A guia HTML fornece dois painéis de exibição. O painel à esquerda é o Painel de Conteúdo Primário e o painel à direita é o Painel Propriedades.

  • No Painel de Conteúdo Primário todo o DOM (Document Object Model) é apresentado em uma estrutura de nó de árvore que pode ser expandida ou recolhida. Use esse painel para investigar e inspecionar seus códigos-fonte HTML. Os atributos e os valores de elementos HTML podem ser editados clicando neles. Os nós de texto também são editáveis nesse modo. Entretanto, se desejar editar a página da Web inteira em um formato de editor, você pode clicar no botão de Editar. No modo de edição, o botão Quebra automática de linha é ativado. Você também notará que o conteúdo da página talvez não seja exatamente igual ao do original, pois essa é a representação interna do Internet Explorer para essa página da Web. Se você tiver chamadas de JScript para escrever conteúdo para a página, elas serão exibidas nesse modo de edição. Após concluir a edição, clique no botão Editar novamente e as alterações entrarão em vigor imediatamente.
  • O Painel Propriedades fornece uma barra de menus de seleção de tipo de propriedade na parte superior. Essa barra de menus fornece várias ferramentas para ajudá-lo a inspecionar os códigos-fonte mais detalhadamente. Por exemplo, quando o Painel de Conteúdo Primário estiver no modo DOM, você poderá clicar para selecionar qualquer elemento HTML para inspeção. Após ser clicado, as propriedades do elemento serão exibidas no Painel Propriedades. Como e quais informações são apresentadas depende do tipo de propriedade que você selecionou. Por exemplo, se o tipo atual for Estilo, você verá uma lista das regras CSS que foram aplicadas ao elemento. Os outros tipos de propriedade são Rastrear Estilos, Layout e Atributos.

Usando as ferramentas Estilo e Rastrear Estilos

Quando as ferramentas Estilo e Rastrear Estilos encontram várias regras CSS que se aplicam ao elemento selecionado, as regras são exibidas com base em suas especificidades, de acordo com a especificação de CSS. A regra na parte superior da lista é a primeira a ser aplicada ao elemento selecionado, enquanto a regra na parte inferior é a que define as propriedades de estilo de um elemento selecionado no momento. Os valores dessas regras são editáveis: clique em um valor, digite um novo valor e pressione ENTER; uma alteração será exibida na página da Web imediatamente. As informações localizadas em ambos os tipos de propriedade são iguais. Entretanto, no tipo de propriedade Rastrear Estilos, as informações iguais são agrupadas por propriedades e as regras são exibidas abaixo delas. As propriedades são listadas em ordem alfabética e as regras são novamente classificadas com base na especificidade.

Usando a ferramenta Layout

A ferramenta Layout fornece as informações de modelo de caixa do posicionamento relativo de um elemento em uma página da Web. As informações disponíveis incluem:

  • Deslocamento: esses valores descrevem a distância entre o objeto selecionado e seu pai, conforme representado pelas propriedades offsetLeft e offsetTop.
  • Margem, borda e preenchimento: esses três valores exibem os valores especificados no código-fonte de uma página da Web. Se nenhum valor for especificado, a ferramenta exibirá os valores padrão usados pelo Internet Explorer.
  • Largura e altura: os valores internos são a largura e a altura do elemento, conforme definido pelas propriedades offsetHeight e offsetWidth.

Para cada atributo de modelo de caixa, o valor e a unidade das medidas são exibidos. Clique em um valor para editá-lo e pressione ENTER para confirmar o novo valor ou ESC para cancelar. Após pressionar ENTER, o novo valor entrará em vigor imediatamente. Por padrão (se a unidade de medida não for exibida), a ferramenta Layout trata os valores do modelo de caixa como pixels.

Usando a ferramenta Atributos

A ferramenta Atributos apresenta os atributos de um elemento HTML como uma lista de pares de nome/valor. Você pode inspecionar as informações e o nome e o valor de um atributo clicando duas vezes nele. As informações de nome e valor do atributo também podem ser editadas no Painel de Conteúdo Primário clicando nele. O valor de um atributo pode ser vazio ou nulo, mas o nome de um atributo não pode ser vazio. As alterações feitas nessas informações serão imediatamente refletidas na página da Web. A ferramenta Atributos também oferece a opção de acrescentar atributos adicionais ao elemento ou remover atributos do elemento clicando no botão apropriado na parte superior do painel.

Inspecionando regras CSS

A guia CSS permite que você compreenda a interação entre suas folhas de estilos. Isso é mais útil para os sites que usam várias folhas de estilos. Para alternar entre folhas de estilos, use o Seletor de Folha de Estilos. Quando você seleciona uma folha de estilos, as regras e suas propriedades de estilo associadas são exibidas no Painel de Conteúdo Primário. Essas informações são agrupadas por regras de estilo. Por padrão, esse botão mostra a primeira folha de estilos referenciada em sua página da Web. Conforme mostrado na Figura 4, as regras das folhas de estilos são exibidas abaixo do botão Seletor de Folha de Estilos.

A ferramenta CSS exibe as regras definidas em todas as folhas de estilos usadas por uma página da Web.
Figura 4. A ferramenta CSS exibe as regras definidas em todas as folhas de estilos usadas por uma página da Web.

Para expandir ou recolher as propriedades de uma regra, clique na caixa marcada com um sinal + ou -. Todos os elementos nessa exibição de folha de estilos são editáveis e as edições entram em vigor imediatamente. Uma regra de estilo pode ser ativada ou desativada clicando-se na caixa de seleção ao lado do nome do estilo. Como alternativa, você pode escolher ativar ou desativar apenas uma única propriedade ou algumas propriedades para verificar o efeito causado na regra.

Salvando alterações

Agora que você fez alterações em sua página HTML e em seus arquivos CSS, clique no botão Salvar para salvar suas alterações. A caixa de diálogo Salvar como solicita que você salve o arquivo como .txt, em vez de .html ou .css. Isso impede que você acidentalmente substitua os seus arquivos de origem principais. Além disso, isso é feito porque todas as alterações feitas nas Ferramentas de Desenvolvimento são a representação interna do Internet Explorer da página da Web, e não o que está no código-fonte original. Por esse motivo, ao atualizar a página da Web atual, sair dessa página ou executar a ação Desfazer Tudo, o conteúdo da página da Web original será recuperado.

Observação  Ao trabalhar com as Ferramentas de Desenvolvimento, lembre-se de que não apenas as áreas modificadas de uma página da Web serão diferentes do original, mas que outras partes dela também poderão ser diferentes, pois as Ferramentas de Desenvolvimento exibem a sua página da Web da maneira como ela existe no Internet Explorer, e não como em seu código-fonte. Para evitar uma substituição acidental do código-fonte, as Ferramentas de Desenvolvimento salvam a saída como texto e adicionam um comentário inicial ao arquivo.

Resumo

As Ferramentas de Desenvolvimento do Internet Explorer 8 ajudam você a solucionar problemas em suas páginas da Web. As ferramentas HTML permitem que você concentre-se em atributos e propriedades específicos de elementos HTML individuais de uma página da Web. As ferramentas CSS fornecem uma exibição maior, mostrando como várias regras e propriedades em suas folhas de estilos são interpretadas pelo Internet Explorer 8. Como as alterações feitas nos códigos-fonte nas Ferramentas de Desenvolvimento afetam apenas a representação interna do site no Internet Explorer, e não o código-fonte original diretamente, um botão Salvar é fornecido para permitir que você salve as alterações e as utilize para atualizar seus códigos-fonte. Isso economizará o seu tempo e melhorará a eficiência da manutenção de páginas da Web.

Tópicos relacionados