Introdução às Developer Tools

Descobrindo as Developer Tools de Internet Explorer 9 e suas principais características.

Por Javier Holguera - Tradução de Celeste Veiga


Publicado em: 08/8/12
Valorize este artigo:
As Developer Tools de Internet Explorer fazem parte do navegador desde a versão anterior, a 8. Entretanto, provavelmente pela má fama que IE arrasta desde sua versão 6, não chegaram a se popularizar entre os desenvolvedores web.

Agora que IE9 supõe uma autêntica ruptura com tudo que havia significado, desde um ponto de vista negativo, o navegador de Microsoft até agora, é momento de dar uma nova oportunidade, conhecê-las e descobrir as novidades que foram introduzidas nelas .

1. Acesso às ferramentas

O acesso às ferramentas pode ser realizado de duas formas. A mais simples é pressionar o botão F12 em qualquer aba do navegador. A outra forma de acessá-las é pressionar a tecla ALT para fazer aparecer o menu de Internet Explorer. Nesse menu devemos selecionar "Tools" e, posteriormente "Developer Tools".

Uma vez acessadas, vão aparecer como uma janela flutuante, tal como se pode ver na Figura 1. É possível ancorá-las à parte inferior da janela pressionando o botão superior direito, de forma que possamos seguir interagindo com a janela de forma normal ao mesmo tempo que utilizamos as ferramentas.

É importante ressaltar que cada janela de ferramentas é totalmente independente das demais, de modo que podemos ter abertas tantas abas quanto contenha o navegador.

2. Organização das ferramentas

As ferramentas estão organizadas, de forma geral, em duas zonas de menus: o menu superior (chamado "Command Bar") contém menus que permitem manipular a página web que tivermos carregada na janela ventana. A tira de abas imediatamente debaixo dele (chamada "Mode Tab") permite selecionar o tipo de ferramenta que queremos utilizar. Debaixo do Mode Tab aparece um menu específico para cada modo ou aba, que conterá ícones adaptados ao mesmo. No extremo contrário deste menu específico, em cada modo, vamos ter a nossa disposição uma caixa para buscar elementos dentro da informação.

Se continuarmos baixando encontraremos dois painéis: o painel da esquerda(chamado "Primary Content Pane") mostrará a informação específica da aba, enquanto que à direita se situa outro painel (chamado "Property Pane") que nos ajuda a visualizar informação sobre propriedades dos elementos. Encima do painel de propriedades pode aparecer uma nova tira de abas, que nos dê acesso aos distintos tipos de propriedades que tenha o elemento (ou distintas visões da mesma informação). Na Figura 2 vemos todos estes elementos.

Quanto ao menu superior ou barra de comandos, podemos distinguir dez elementos (ver Figura 3):

  • File: a partir deste menu podemos desfazer as mudanças e selecionar o visor para o código fuente (por padrão, o visor próprio de IE).
  • Find: este menu contém uma opção para ativar a ferramenta que permite selecionar um elemento clicando sobre ele. Útil para identificar um elemento da página dentro da árvore DOM.
  • Disable: facilita desativar elementos de IE, como o uso de arquivos CSS o o bloqueador de popups.
  • View: contém opções para mostrar mais informação sobre os elementos da página, como suas IDs ou as URLs às que apontam.
  • Images: a partir deste menu podemos ativar informação adicional sobre as imagens que a página contém, como suas dimensões, tamanho, rota, etc.
  • Caché: com este menu podemos manipular a caché do navegador, tanto de navegação quanto de cookies.
  • Tools: este menu nos dá acesso a diferentes ferramentas que nos permitem, entre outras funções, averiguar o padrão RGB de um cor, mudar a cadeia UserAgent por um valor personalizado, etc.
  • Validate: este menu contém acessos para validar os distintos componentes da página web: HTML, CSS, Feed RSS, etc.
  • Browse Mode: el Browse Mode permite configurar de que modo se vai apresentar o navegador ante o servidor ao fazer a requisição da página, podendo ser feito como versões anteriores de IE.
  • Document Mode: este menu controla o motor de renderizado que vai ser utilizado para carregar a página. É muito útil para saber como se vai visualizar a página web em versões anteriores de IE.

O menu inferior contém seis abas que representam os seis modos das Developer Tools (ver Figura 4):

  • HTML: manipulação da árvore DOM que representa o modo em que o motor de Internet Explorer renderizou a página web.
  • CSS: manipulación de los ficheros de estilos CSS que se han cargado con la página web.
  • Console: contém um console onde se podem visualizar distintas mensagens de erro escritos por Internet Explorer.
  • Script: permite depurar e inspecionar o código Javascript.
  • Profiler: facilita informação sobre tempos de carregamento da página e subsistemas que estão envolvidos no seu renderizado.
  • Network: novidade em IE9, esta aba permite conhecer o comportamento na rede da página.

3. Conclusões

Vimos como acessar as Developer Tools, qual é a estrutura da janela que a contêm, e de um modo resumido o que podemos fazer com elas. Nos próximos artigos detalharemos cada um dos menus de comando e dos modos de funcionamento destas imprescindíveis ferramentas.

4. Bibliografia

Herramientas de Desarrollador de IE en MSDN (Espanhol): http://msdn.microsoft.com/es-es/aa740478.aspx
Vídeo sobre las Herramientas de Desarrollador (Espanhol): http://channel9.msdn.com/blogs/davidsb/ie8-con-herramientas-de-desarrollo-integradas
Descobriendo las Herramientas de Desarrollador (Espanhol): http://msdn.microsoft.com/library/dd565628(VS.85).aspx

Nota: Para mais informação e completar conhecimentos sobre as Developer Tools recomendamos a leitura do manual que temos em Criarweb.com






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato