Como ser um WebDesigner [no Linux]: Extensões para o Firefox

[ da série Como ser um WebDesigner no Linux ]

Existem ótimas - e eu diria até imprescindíveis - extensões para o Firefox para quem é WebDesigner. Como o Firefox é multi-plataforma, este artigo se aplica aos usuários de Windows e Mac também; mas meu enfoque é mostrar ainda que o Linux é uma excelente plataforma para Webdesigners.

WebDeveloper, o carro-chefe
Essa extensão é simplesmente fantástica! É aquela que todos concordam que é necessário ter. É uma barra de ferramentas com opções diversas voltadas para os desenvolvedores Web. São tantas opções que seria necessário um artigo só pra falar disso.
Eu destacaria a opção de edição de CSS na Sidebar. É fantástico: você abre o CSS da página na Sidebar e edita em real-time; as modificações vão sendo aplicadas na hora.
Há trocentas outras opções, como validação do código, desabilitar recursos como JavaScript ou Java, informações sobre a página, recursos de manipulação de formulários e imagens e etc.
http://chrispederick.com/work/firefox/webdeveloper/

ColorZilla, ajudando nas cores
Também considero a ColorZilla indispensável. Ela permite você pegar a cor de qualquer coisa numa página, dar zoom na página inteira, tem paleta de cores, um inspetor DOM voltado pra cores e algumas opçõezinhas.
http://www.iosart.com/firefox/colorzilla/

Aardvak, uma novidade interessante
Esse extensão de nome difícil também é bem nova mas bastante útil. Permite selecionar elementos ao apontá-los, mostrando a tag, o id e o class. Selecionado, esse elemento pode ser retirado, pintado; ainda é possível selecionar o elemento que o contém, ver seu código-fonte, e muitas outras coisas. Os planos para as próximas versões prometem muitas funcionalidades bem interessantes.
Uma coisa legal é que no site deles, você pode rodar a extensão direto antes de instalá-la, através de uma demonstração em JavaScript. Vale a pena uma conferida pra entender dir
http://karmatics.com/aardvark/

MeasureIt para medir qualquer coisa
Uma extensãozinha nova e simples mas bem legal: disponibiliza uma régua com a qual você pode medir qualquer coisa no navegador. É bem útil pra ajudar a posicionar as coisas no seu Site quando elas mão estão encaixando.
http://www.kevinfreitas.net/extensions/measureit/

Venkman, Javascript Debugger
Esse debugger existe há muito tempo, antes do Firefox. É extremamente completo e utilíssimo pra quem desenvolve aplicações complexas com JavaScript. Só um porém: ela é bastante pesada, motivo pelo qual eu não a uso e não sei muitos detalhes :-P
http://www.hacksrus.com/~ginda/venkman/

Javascript Console
Não é uma extensão, já vem com o Firefox, só tenha o cuidado de instalar junto. Mostra os erros de JavaScript de forma bastante detalhada, informando com exatidão qual é o erro e até a linha onde ela está. Pra quem tentava desenvolver no IE, é um grande avanço frente àqueles erros bizarros, incompreensíveis e inexatos.

DOM Inspector
Também faz parte do Firefox. Exibe toda a árvore DOM do documento, com os valores dos atributos e tudo mais. Você pode inspecionar cada elemento daquele momento; ou seja, se você usa um JavaScript que altera a sua página, essas alterações estão no DOM Inspector (diferente do "Ver código-fonte" que não exibe essas modificações).

Atualização 30/04:
Não sei como fui me esquecer do JavaScript Shell (só fui lembrar dele quando fui usá-lo hoje). Na verdade nem é uma extensão, é um bookmarklet. Mas é absolutamente fantástico. Abre um shell onde você pode fazer qualquer coisa em JavaScript praquela página. O shell é tão completo que tem até auto-completar com a tecla tab!
Se você faz qualquer coisa com JavaScript, é um bookmarklet essencial!

posted by Sergio @ 12:09 AM