Clique aqui para instalar o Silverlight*
BrasilAlterar|Todos os sites da Microsoft
MSDN
|Developer Centers|Biblioteca|Downloads|Assinaturas MSDN
Pesquisa rápida


Descobrindo as Ferramentas para Desenvolvedores do Internet Explorer 8.

Publicado em: 3 de fevereiro de 2009

Nota: Esta documentação é preliminar e está sujeita a alterações.

O Internet Explorer 8 oferece o recurso Ferramentas para Desenvolvedores, com ferramentas que o ajudam a pesquisar e resolver problemas relacionados a HTML, Folhas de Estilo em Cascata (Cascading Style Sheets - CSS) e JavaScript. Este artigo introduz as ferramentas para desenvolvedor HTML e CSS.

*
Nesta página
IntroduçãoIntrodução
Abrindo e Fechando as Ferramentas para Desenvolvedores Abrindo e Fechando as Ferramentas para Desenvolvedores
Testando Páginas da Web em Diferentes ModosTestando Páginas da Web em Diferentes Modos
Testando o Modo NavegadorTestando o Modo Navegador
Testando o Modo DocumentoTestando o Modo Documento
Destacando Objetos numa Página da WebDestacando Objetos numa Página da Web
Selecionando Objetos numa Página da WebSelecionando Objetos numa Página da Web
Usando as Ferramentas HTMLUsando as Ferramentas HTML
Usando as Ferramentas de Estilo e Estilo de TraçoUsando as Ferramentas de Estilo e Estilo de Traço
Usando a Ferramenta LayoutUsando a Ferramenta Layout
Usando a Ferramenta CSSUsando a Ferramenta CSS
Salvando AlteraçõesSalvando Alterações
SumárioSumário
Tópicos RelacionadosTópicos Relacionados

Introdução

O recurso Ferramentas para Desenvolvedores do Internet Explorer 8 capacita-o a revisar as representações internas de uma página da web a partir da perspectiva do navegador. Você pode usar as Ferramentas para Desenvolvedores para uma variedade de tarefas, incluindo (mas não se limitando a) visualizar atributos individuais, determinar por que uma regra de CSS específica é aplicada a um elemento individual, prever diferentes modos de compatibilidade para documentos, e muito mais. Ao expor como o navegador interpreta uma página da web, as Ferramentas para Desenvolvedores oferecem muitas oportunidades para pesquisar e resolver problemas, e o fazem com mais rapidez do que era possível com as versões anteriores do Internet Explorer.

Este artigo introduz as Ferramentas para Desenvolvedores HTML e CSS. Para informações sobre como utilizar as Ferramentas para Desenvolvedores para depurar em JavaScript, veja Ferramentas para Desenvolvedores: Visão Geral da Depuração de Scripts.

Abrindo e Fechando as Ferramentas para Desenvolvedores

Para abrir as Ferramentas para Desenvolvedores, tecle F12; como alternativa, no menu Ferramentas da barra de ferramentas do Internet Explorer 8, clique em Ferramentas para Desenvolvedores. As imagens a seguir mostram a janela das Ferramentas para Desenvolvedores.

Figura 1. Comando das Ferramentas para Desenvolvedores e o botão Fechar.

Uma vez iniciado, as Ferramentas para Desenvolvedores podem estar em sua própria janela ou afixados à instância do navegador que o abriu. Cada guia do Internet Explorer tem suas próprias Ferramentas para Desenvolvedores. Ao trabalhar com múltiplas instâncias das Ferramentas para Desenvolvedores, utilize o recurso Pin (Afixar) — cujo botão aparece no canto superior direito da janela das Ferramentas para Desenvolvedores — para anexar cada ferramenta de desenvolvimento à sua janela. Quando afixadas, a janela Ferramentas para Desenvolvedores pode ser redimensionada para exibir uma área de visualização maior.

Testando Páginas da Web em Diferentes Modos

As Ferramentas para Desenvolvedores o habilita a testar suas páginas da web em diferentes modos, assim permitindo uma rápida resolução de problemas de compatibilidade antes que seus usuários os encontrem. Quando as Ferramentas para Desenvolvedores são abertas pela primeira vez, elas detectam as configurações de modo da página da web e as tratam como o modo padrão daquela página. Você pode então testar a página usando os menus Modo Navegador e o Modo Documento.

Testando o Modo Navegador

Com os menus do Modo navegador, você pode escolher como o navegador reportará as três propriedades seguintes:

Propriedade*
Descrição*

Seqüência do Agente do Usuário

O valor que o Internet Explorer envia aos servidores web para se identificar.

Vetor de Versão

O valor usado em comentários condicionais, que também podem ser usados para afetar CSS, markup e blocos de script. Para mais informações sobre comentários condicionais e vetor de versão, leia este artigo: Sobre Comentários Condicionais .

Modo Documento

O valor usado para determinar se o Internet Explorer usa o comportamento mais recente para operações CSS, DOM, e JavaScript, ou emula versões anteriores do Internet Explorer para compatibilidade.

Na barra de menu das Ferramentas para Desenvolvedores, o Modo Navegador oferece três opções, cada uma modificando as propriedades descritas na tabela anterior de uma maneira diferente. A tabela a seguir descreve essas opções.

Modo Navegador*
Descrição*

Internet Explorer 7

Neste modo, o Internet Explorer 8 reporta um agente do usuário, vetor de versão e modo documento como se fosse o Internet Explorer 7. Use este modo para testar como os usuários do Internet Explorer 7 sente o seu site.

Internet Explorer 8

Neste modo, o Internet Explorer 8 reporta um agente do usuário, vetor de versão e modo documento para combinar o comportamento padrão do navegador, que é mais compatível aos padrões no Internet Explorer 8. Use este modo para testar como os usuários do Internet Explorer 8 sentem o seu site.

Visão de Compatibilidade Internet Explorer 8

Neste modo, o Internet Explorer 8 reporta um vetor de versão e modo documento como se fosse o Internet Explorer 7, mas a seqüência do agente do usuário inclui um token indicando que ele é verdadeiramente o Internet Explorer 8 juntamente à cadeia do Internet Explorer 7. Use este modo para testar como os usuários do Internet Explorer 8 sentem o seu site se eles escolherem a opção Visão de Compatibilidade no Internet Explorer.

Nota: Quando o usuário clicar no botão Visão de Compatibilidade, o navegador salva seu domínio numa lista de Visão de Compatibilidade. As visitas posteriores ao domínio serão automaticamente processados sob o modo Visão de Compatibilidade do Internet Explorer 8. Um usuário pode Adicionar ou Remover domínios de sua lista de compatibilidade selecionando Configurações das Visões de Compatibilidade no menu Ferramentas.

Testando o Modo Documento

Conforme foi discutido em Defininido a Compatibilidade do Documento, o Internet Explorer 8 introduz o conceito de compatibilidade de documentos, que controla como o navegador interpreta e exibe páginas da web. As Ferramentas para Desenvolvedores permitem que você escolha dinamicamente o modo de compatibilidade usado para exibir uma página da web. Dessa forma você pode facilmente ver diferenças visuais entre vários modos de compatibilidade, e descobrir o modo de compatibilidade mais apropriado para uma página.

Para alterar o modo de compatibilidade de documento para uma página da web em particular, clique em Modo Documento no menu Ferramentas para Desenvolvedores. Esse modo define como o Internet Explorer processa uma página da web, mas não surte efeito no vetor da versão ou seqüência do agente do usuário. Usar essa opção com o modo navegador permite que você determine rapidamente qual modo documento é o mais indicado para seu site. O Modo Documento oferece três opções.

Modo Documento*
Descrição*

Quirks

Quando um documento é processado sem tipo de documento ou um tipo de documento quirks, esse comportamento do se equivale com o do Internet Explorer. É similar ao comportamento do Microsoft Internet Explorer 5 e ao comportamento do modo quirks do Internet Explorer 6, e é igual ao comportamento do modo quirks do Internet Explorer 7.

Padrões Internet Explorer 7

Este comportamento é igual ao do Internet Explorer 7 quando processa um documento que tenha tipo estrito ou desconhecido.

Padrões Internet Explorer 8

Este é o mais novo comportamento compatível com padrões disponível no Internet Explorer 8 e é o modo padrão usado Internet Explorer 8 para processar documentos que tenham tipo de documento estrito ou desconhecido.

Nota: Similar às mudanças em outras ferramentas para desenvolvedores, alterar o Modo navegador ou o Modo Documento é temporário e não afeta a fonte subjacente de uma página da web. Um modo selecionado permanecerá em efeito para uma guia do navegador até que outro modo seja escolhido ou a guia seja fechada.

Destacando Objetos numa Página da Web

O submenu Contorno do menu de Ferramentas para Desenvolvedores destaca grupos de objetos numa página da web. Isso o ajuda a entender onde os elementos aparecem na página, assim como os tipos de elementos usados para criar efeitos específicos. Quando você escolhe comandos de Contorno, o Internet Explorer destaca elementos correspondentes. Por exemplo, se você escolher o comando de elementos div, contornos aparecerão em volta de todos os elementos div numa página da web atual, como mostra a seguinte figura.

Figura 2. Comandos no menu Contorno mostram onde os objetos aparecem numa página web.

Para limpar um grupo de contornos, clique no comando apropriado no menu Contorno, ou clique no botão Limpar Contornos no menu Contorno.

Selecionando Objetos numa Página da Web

Muitas ferramentas para desenvolvedores em HTML CSS operam em elementos individuais numa página da web. Para selecionar um elemento, destaque-o na ferramenta HTML ou clique no botão Selecionar Elemento por Clique no menu Localizar das Ferramentas para Desenvolvedores. Ao clicar nesse botão, você será capaz de usar o mouse para selecionar um elemento em sua página da web. Mova o cursor sobre um elemento; quando uma caixa azul destacar a borda do elemento, clique para selecioná-lo. A figura a seguir mostra os resultados da seleção de um elemento.

Figura 3. O botão Selecione Elemento por Clique e os resultados da seleção de um elemento.

Quando você destaca e clica sobre um elemento HTML, a ferramenta HTML mostra os atributos do elemento selecionado, juntamente a sua localização na representação interna usada Internet Explorer 8 para exibir a página. Você pode visualizar os valores do atributo atual do elemento e experimentar com novos valores ao usar a ferramenta HTML para mudá-los. Para mudar o valor de um atributo, clique sobre ele, insira um novo valor e tecle ENTER; o Internet Explorer 8 exibirá os efeitos de sua alteração. Você pode descartar valores parciais teclando ESC antes do ENTER. Para restaurar a página web à sua aparência original, atualize-a.

Nota: Alterações feitas usando a ferramenta HTML não afetam a fonte subjacente de uma página web; elas continuam em efeito até que a página seja atualizada, que o navegador entre numa nova página ou que ela seja fechada.

Usando as Ferramentas HTML

As ferramentas HTML o ajudam a compreender a apresentação de elementos HTML numa página web. Eles aparecem à direita da ferramenta HTML e incluem os seguintes recursos:

Estilo indica como suas regras CSS foram aplicadas ao elemento selecionado. Ele mostra os atributos que foram afetados e onde seus valores estão especificados. Uma marca de seleção à esquerda de cada regra pode habilitar ou desabilitar essa regra; você pode usar marcas de seleção para experimentar com a aparência de elementos. As regras para um elemento são exibidas numa ordem em cascata: a última regra na lista é aplicada e a regra mais alta na lista é sobrescrita.

Rastrear Estilos exibem os atributos CSS que foram aplicados a um elemento, o elemento onde um atributo foi definido e (se aplicável) o nome da folha de estilo que define o valor do atributo. As regras para um atributo são mostradas em cascata: o ultimo elemento da lista é aplicado e o mais alto da lista é sobrescrito.

A ferramenta Layout exibe os atributos da caixa de modelo do elemento, que por sua vez mostra como o elemento flui em relação aos objetos à sua volta. Para mais informações sobre o modelo da caixa, veja a discussão de modelo da caixa W3C.

A ferramenta Atributos exibe todos os atributos e seus valores para um elemento selecionado.

Usando as Ferramentas de Estilo e Estilo de Traço

Quando as ferramentas Estilo e Rastrear Estilos encontram regras múltiplas de CSS que se aplicam ao elemento selecionado, as regras são exibidas com base em sua especificidade em relação ao CSS. A regra no topo da lista é a primeira a ser aplicada ao elemento selecionado, enquanto a regra no fim é a que atualmente define os atributos de estilo de um elemento selecionado. Os valores dessas regras são editáveis: clique sobre um valor e digite um novo; uma alteração aparecerá imediatamente na página web.

Usando a Ferramenta Layout

A ferramenta Layout exibe os seguintes valores:

Os valores Offset descrevem a distância entre o objeto selecionado e seus primários, conforme representado pelas propriedades offsetLeft e offsetTop.

Margem, borda e preenchimento exibem os valores especificados na fonte de uma página web. Se nenhum valor for especificado, a ferramenta Layout mostrará os valores-padrão usados pelo Internet Explorer.

Os valores mais internos são altura e largura dos elementos conforme definidas pelas propriedades offsetHeight e offsetWidth.

Para cada atributo de modelo de caixa, o valor e unidade de medida são exibidos. Clique num valor para editá-lo, então tecle ENTER para executar o novo valor, ou ESC para cancelá-lo. Por padrão (se a unidade de medida não for mostrada na ferramenta Layout), a ferramenta Layout trata os atributos de modelo de caixa como pixels.

Usando a Ferramenta CSS

A ferramenta CSS permite que você entenda a ação mútua entre suas folhas de estilo. É muito útil para sites que usam diversas folhas de estilo. Para alternar entre folhas de estilo, clique no botão Seletor de Folha de Estilo e use o menu que mostra uma lista de todas as folhas de estilo carregadas por sua página web. Quando você selecionar uma folha de estilo, as regras e seus atributos de estilo associados aparecem no painel Conteúdo Primário. Por padrão, esse botão mostra a primeira folha de estilo referenciada em sua página web. Como mostra a figura 4, as regras para folhas de estilo aparecem abaixo do botão Seletor de Folha de Estilo.

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

Para expandir ou editar os atributos de uma regra, clique na caixa marcada +/-. Todos os elementos nessa visualização de folha de estilo são editáveis, e as edições são realizadas imediatamente.

Salvando Alterações

Após realizar alterações em sua página HTML e arquivos CSS, você pode querer salvar essas alterações. Na guia HTML e CSS, clique no ícone Salvar para salvar todas as mudanças no arquivo atual. A caixa de diálogo Salvar Como avisa para salvar o arquivo como .txt em vez de .html ou .css. Isso evitará que você acidentalmente substitua seus arquivos-fonte principais; adicionalmente, isso é feito porque todas as mudanças feitas em Ferramentas para Desenvolvedores são representações internas feitas pelo Internet Explorer da página web, e não o que está na fonte original. Por essa razão, atualizar a página atual, navegar para fora dela ou realizar o comando Desfazer Tudo trará de volta a página original.

Nota: Ao trabalhar com as Ferramentas para Desenvolvedores, lembre-se de que não só as áreas modificadas de um site serão diferentes de suas fontes, mas outras partes dele podem também ser diferentes, porque as Ferramentas para Desenvolvedores exibem seu site como ele existe no Internet Explorer e não nas suas fontes. Para evitar sobrescrever acidentalmente as fontes, as Ferramentas para Desenvolvedores salvam o resultado como texto e adicionam um comentário à esquerda do arquivo.

Sumário

As Ferramentas para Desenvolvedores do Internet Explorer 8 o ajudam a solucionar e resolver problemas com suas páginas web. A ferramenta HTML permite que você foque em elementos e atributos específicos de elementos HTML individuais numa página web. A ferramenta CSS oferece uma visão mais ampla, mostrando como diversos atributos e regras em suas folhas de estilo são interpretadas pelo Internet Explorer 8. Como as alterações realizadas na fonte com as Ferramentas para Desenvolvedores afetam apenas as representações internas feitas pelo Internet Explorer do site e não a fonte original diretamente, você pode escolher salvar as alterações e usá-las para atualizar suas fontes. Isso pode economizar seu tempo e aprimorar a eficiência de manter páginas da web.

Tópicos Relacionados

Ferramentas para Desenvolvedores: Visão Geral da Depuração de Scripts

Referências GUI das Ferramentas para Desenvolvedores do Internet Explorer 8

Ferramentas para Desenvolvedores: Visão Geral do Criador de Perfil de Scripts

Ferramentas para Desenvolvedores: Atalhos no Teclado

Definindo a Compatibilidade do Documento

Gerenciador de Depuração de Processos

Interfaces de Script do Windows

 
 

©2016 Microsoft Corporation. Todos os direitos reservados. Entre em contato |Nota Legal |Marcas comerciais |Política de Privacidade
Microsoft