Internet Explorer Developer Toolbar + IEDebugBar

Por: Diego Franco - [ December 14th, 2007 ]

Vou postar aqui três extensões para o Internet Explorer que qualquer hora dessas pode te salvar de um erro esquisito. Já disse e volto a dizer, boas ferramentas de desenvolvimento podem afetar absurdamente em sua produtividade, te ajudando a descobrir erros de script e outras coisinhas que vão aparecendo no decorrer do desenvolvimento de um site.

A primeira: Internet Explorer Developer Toolbar ( Baixe aqui )

Essa tem um visual semelhante a Firebug a qual citei aqui neste post, porém nem se compara a tal extensão. Essa extensão irá te auxiliar em erros de sintáxe, indentificação de elementos como DIVS, Links, imagens e outros, dividos por cores e mais algumas outras opções não tão interessantes, mas não deixa de ser uma extensão interessante já que boas extensões para o IE são raras.

A segunda: IEDebugBar ( Baixe aqui )

Essa é parecida com a de cima e consequentemente também com a Firebug, um pouco mais robusta que a IEDeveloper a IEdebugBar tem um inspetor de propriedades para DOM, HTTP, Javascript, AJAX e outras mais que você pode ver uma prévia abaixo (em inglês) ou no conteúdo completo no site do desenvolvedor.

DOM Inspector: View DOM Tree and modify tags attributes and css attributes on the fly to test your page
HTTP Inspector: View HTTP/S request to check cookies, GET and POST parameters, view server info
Javascript Inspector and Javascript Console: View javascript functions for easier debugging, see Javascript and AJAX code
HTML Validator: Validate HTML code to correct and optimize your code and html size of your page
And many more features: See page cookies, get pixel color on a page, make a page screenshot…

A terceira: Companion.JS ( Baixe aqui ou acesse o site do desenvolvedor)

Essa sim eu tenho usado mais constantemente, mais simples do que a DebugBar ela é específica para depurar javascripts, mostra o erro no próprio javascript te indicando a linha, local do erro em destaque e o nome do arquivo. Realmente essa é uma ferramenta que mesmo para aqueles que não usam o IE7 como seu navegador e até mesmo para um Analista de Qualidade, é uma excelente extensão para se usar na hora do desenvolvimento e em casos de erros de javascripts no IE7 claro. Quem nunca se deparou com aquela marmota de mensagem que o IE te dá quando tem algum problema na página? “Concluído mas contém erros na página”, e o melhor é que não informa mais nada, não te dá nenhuma referência de onde está o erro. Essa extensão vai substituir esse depurador padrão que, incluse para que a extensão funcione perfeitamente você deve desabilitar duas opções no IE7 conforme mostrado abaixo.

Vá até o menu:
Ferramentas > Opções da Internet > Avançadas
Na janela Configurações vá até o ítem:
Navegação
Desabilite as caixas:
- “Desabilitar depuração de scripts (Internet Explorer)” e
- “Desabilitar depuração de scripts (Outros)”

A extensão deverá funcionar perfeitamente. Veja abaixo um print da extensão em uso.

DebugBar IE7