Developer Tools (Parte II)

Este é o segundo artigo da série dedicada às Developer Tools de Internet Explorer 9.

Por Javier Holguera - Tradução de Celeste Veiga


Publicado em: 06/5/11
Valorize este artigo:
Se no artigo anterior pudemos conhecer a maneira como se organizam as ferramentas e os diferentes menus e janelas de que se compõem, no atual começaremos a descrever as opções que compõem seu menu, o chamado "Command Menu" ou "Menu de Comandos".

1. Menu de Comandos

Este menu está situado ao longo da borda superior da janela de ferramentas, tal como podemos ver na Figura 1.

Contém acessos a diferentes funcionalidades relacionadas com a página que está sendo analisada com as ferramentas. A continuação, descreveremos os diferentes submenus e os elementos de cada um deles.

1.1. Submenu "File"
Este menu contém três opções, como se pode ver na Figura 2:

  • Undo all: permite, como seu nome indica, desfazer todos as mudanças que tenhamos feito na página. Há que ter em conta que as mudanças são sempre em uma versão local, não no servidor; portanto, desaparecem assim que recarregamos a página web, embora exista a possibilidade de salvá-las em um arquivo para um uso posterior.
  • Customize Internet Explorer view source: desde este menu podemos escolher o programa com o que queremos visualizar o código fonte da página web. Temos três possibilidades: usar o visor por padrão de IE, utilizar o velho Notepad ou escolher outro programa.
  • Exit: fecha as ferramentas.
1.2. Submenu "Find"
Neste menu encontramos uma única opção: "Select element by click", acessível também com o atalho de teclado "CONTROL+B" ou clicando o ícone de seta que aparece em cada um dos menus específicos de cada modo (os veremos em um próximo artigo).

Com esta funcionalidade o que conseguimos é acessar diretamente a posição dentro da árvore DOM de um elemento, depois de clicar nele. Depois de selecionar esta opção, ao passar o mouse sobre os elementos da página web, irão aparecendo bordas à sua volta que nos permitem delimitá-los. Se clicarmos sobre um deles, em caso de estar ativada a aba HTML, se mostrará o nodo da árvore que corresponde ao elemento sobre o qual tenhamos clicado.

Na Figura 3 podemos ver esta ferramenta em funcionamento, assim como o ícone que se ativa nos menus específicos de cada modo, ícone que todos eles compartilharão entre si.

1.3. Submenu "Disable"
Com este menu é possível comprovar de que forma se comportará a página ao se desativarem algumas funcionalidades. Especificamente temos acesso a três opções nele:

  • Script: desativa os scripts da página. Esta opção não aparece disponível quando está ativado o modo "Protected Mode". Para desativá-lo é necessário entrar nas opções de Internet Explorer, especificamente na aba de Segurança.
  • Pop-up Blocker: controla o bloqueador de popups que vem com o IE.
  • CSS: desativa o uso das folhas e estilo CSS.
Na Figura 4 podemos ver este menu, bem como o aspecto de Google.com em caso de que desativemos as folhas de estilo com a opção correspondente.

1.4. Submenu "View"
Este menu nos permite sobrepor camadas de informação extra sobre os elementos da página. Estas são as opções que podemos utilizar (ver Figura 5):

  • Class and ID Information: esta opção nos permite visualizar, sobre cada elemento, uma etiqueta que nos mostra sua classe e seu id, se foram definidos.
  • Link Paths: esta opção mostra, sobre cada link, uma caixa com a rota a que se dirige.
  • Link Report: gera um arquivo XML com os links que a página contém.
  • Tab Indexes: mostra uma caixa com o valor da propriedade tabindex naqueles elementos em que tenha sido sobrescrita.
  • Access Keys: mostra em uma caixa o valor da propriedade accesskey naqueles elementos em que tenha sido sobrescrita.
Dentro do submenu "View" existe outro submenu chamado "Source". Desde este menu podemos fazer diferentes transformações sobre o código fonte para sua posterior visualização. As opções deste submenu são:
  • Element Source with Style: esta opção é realmente útil. Se temos selecionado um elemento do HTML, nos abre uma janela de código fonte de IE que conterá exclusivamente o código fonte do elemento e as regras CSS aplicadas a ele. Deste modo nos podemos centrar em um elemento específico, distanciando-nos de tudo o que a página tem a seu redor.
  • DOM (Element): esta opção é similar à anterior, só que não mostra as folhas de estilo CSS do elemento selecionado.
  • DOM (Page): esta opção mostra o HTML completo da página, incluído o código adicionado mediante scripts de forma dinâmica.
  • Original: mostra o código HTML original da página, sem incluir inserções mediante scripts. Na prática, equivale à opção "View Source" do navegador.
Na Figura 6 podemos ver este outro menu com suas diferentes opções.

1.5. Submenu "Images"
Similar ao submenu "View", nos permite visualizar informação extra em forma de caixas flutuantes. Neste caso específico, esta informação se centra exclusivamente nas imagens e conta com as seguintes opções (como pode ser visto na Figura 7):

  • Disable images: esta opção refresca a página e a mostra sem visualizar suas imagens.
  • Show images dimensions: mostra, sobre cada imagem, as dimensões da mesma.
  • Show images file sizes: mostra o tamanho de cada arquivo de imagem.
  • Show images paths: mostra a URL absoluta da imagem.
  • View Alt text: permite ver o texto alternativo à imagem, se foi definido.
  • View image report: gera um documento XML com as imagens da página.

2. Conclusões

Vimos parte do Menu de Comandos das Developer Tools, mas ainda nos falta ver outras opções como Caché, Tools ou Validate, que completaremos no próximo artigo.

3. Bibliografia

Referencia de la Interfaz de Usuario de las Developer Tools (Inglês): http://msdn.microsoft.com/en-us/library/dd565626(v=VS.85).aspx
Centro de Desarrollo de Internet Explorer 9 (Espanhol): http://msdn.microsoft.com/es-ES/ie






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

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