Aplicações Web: Incrementando o Navegador para Desenvolvedor e Designers

quinta-feira, 3 de abril de 2008

Incrementando o Navegador para Desenvolvedor e Designers

Para quem depura aplicações web já deve estar acostumado a suar, quando temos um problema no comportamento de uma página, css ou javascript no navegador. E isto acontece de forma rotineira, fazemos uma página que pode não ter o comportamento esperado, seja porque realmente esquecemos de alguma coisa, ou porque caímos em comportamentos específicos do Internet Explorer ou do Firefox.

Sempre estiveram disponíveis no mercado ferramentas para depuração(Venkman, Microsoft Script Debugger), mas existem ferramentas que disponibilizam diversas outras informações de um forma realmente fácil! Saudemos a concorrência entre Internet Explorer e Firefox.

Minha intenção não será escolher a melhor ferramenta ou navegador, pois acaba que se formos desenvolver aplicações para ambos navegadores, teremos que nos adaptar aos dois, mas mostrar o que tem de comum e diferente entre as ferramentas disponíveis para cada navegador.

Primeiro de tudo é que o IE 7 vem de galera e o Firefox 2 vai de Firebug. Ou seja, o Internet Explorer tem várias ferramentas para prover diferentes funcionalidades que precisamos e o Firefox tem boa parte no Firebug. Parece que no Internet Explorer 8, as coisas estão mais integradas e unificadas, sugerindo que este talvez este seja o melhor caminho.

Análise de HTML, DOM e CSS: Firebug(Free) x IE Developer Toolbar (Free)

Ambos possuem:

Explorar e modificar o DOM(Document Object Model) de uma página web. (1) (2)
Localizar e selecionar elementos específicos da página web. (1) (2)
Ver informações do HTML, inclusive de forma direcionada ao elemento selecionado. (1) (2)
Mostrar elementos como tables, images ou qualquer outro definido. (2)
Mostrar o elemento visual do HTML selecionado (1)
Mostrar dimensões de imagens, tamanho, caminho e texto alternativo (1*) (2)
Atalho para validar o HTML, CSS, WAI, e RSS (2)
Redimensionair a janela para uma nova resoluções(800x600, 1024 x 768) (2)
Possibilidade de limpar cache do navegador, cookis salvos (2)
Mostrar uma regua, para medir distância entre pontos ou elementos. (2)
Color picker: para retornar o RGB de uma cor clicada. (2)
Mostrar a hierarquia do elemento (1)
Poder editar o elemento em texto, como html(1)
Mostrar o HTML e css atual, ou seja, com as informações alteradas dos scripts(1) (2)