Instalei hoje o Beta 2 do Internet Explorer 8. Ao executá-lo pela primeira vez, fui avisado de que um add-on que eu havia instalado na versão anterior (Web Developer Toolbar) não era compatível com essa versão. Cliquei na opção “check for updates” e na página à qual fui direcionado tive a supresa de ler que a versão 8 do IE incorporou uma série de ferramentas para desenvolvedores e web designers. Essas ferramentas (nomeadas de “Developer Tools”) estão acessíveis através da tecla de função F12.

A primeira tela que é exibida é uma árvore com os elementos da página corrente:

Ao navegar na árvore, clicando sobre um elemento específico, são exibidos os estilos aplicados a esse elemento. É aqui que a brincadeira começa a ficar interessante: os estilos sobrescritos são "riscados". Por exemplo, se você tiver um estilo semelhante a esse:

.container{
   background-color:red;
   font-weight: bold;
}

.containerInner{
   font-weight:normal;
}

...e uma página com o seguinte trecho:

<div class="container">
   <div class="containerInner">
       <p>teste</p>
   </div>
</div>

...na árvore do Developer Tools o font-weight do esilo .container apareceria riscado, pois ele é sobrescrito pelo font-weight do divInner (lembre-se que os estilos são aplicados de fora para dentro)

Veja uma tela com um exemplo real:

Veja que todos os estilos possuem check-box na frente. Eles servem justamente para o que você está pensando: você pode desmarcar determinados estilos e ver na hora qual o comportamento disto na página! Não preciso nem dizer o quanto isso é útil para caçar bugs no layout.

Se vocÊ não conseguir achar um determinado elemento pela árvore, pode procurá-lo clicando diretamente na página que está sendo "debugada" (opção Find->Select element by click ou pelo ícone da "flechinha").

Visualização de HTML aprimorada

As versões anteriores do IE exibiam o fonte HMTL de uma forma rudimentar. Agora isso foi bastante melhorado:

Perceba a opção de "Debug" da página!! (não testei ainda pois estou rodando pelo debug do Visual Studio 2008)

Outras features interessantes

• Outline->DIV elements:Mostra na página um contorno em todas as divs (existem opções para mostrar também as tabelas, células, imagens, etc;
• Tools->Resize:Redimensiona a página nos formatos mais comuns: 800x600, 1024x768, etc, dessa forma você pode checar facilmente a compatibilidade da página com esses formatos;
• Browser Mode:Escolhe o engine de renderização da página. Como sabemos, o IE 8 procura ser mais compliant com os webstandars e com isso se espera uma quebra de compatibilidade com as páginas feitas pensando-se nas versões anteriores do IE. Com essa opção, podemos ver como a página se comporta no engine do IE 8, do IE 7 e do IE 8 no modo compatibilidade.

Existem diversas outras opções que já estamos acostumados a ver em plugins como o "Webdeveloper toolbar" (Firefox), como por exemplo, esconder as imagens, validação do código, color picker, relatório de links, visualização dos cookies da página, etc

As vezes a Microsoft me surpreende. Não esperava ver uma ferramenta dessas em um aplicativo para usuários comuns dela.