sábado, 6 de setembro de 2008

Firefox: Principais Plugins para Desenvolvimento

Se você é ou quer ser desenvolvedor web, independente de quais linguagens ou tecnologias você vai utilizar, certamente haverá a necessidade perene de testar seu sistema em pelo menos um navegador (dependendo do público a que se destina, será necessário testes em váááários navegadores!!). Entretanto, disto decorre um pequeno problema: os navegadores não foram feitos para testar portais, mas sim para visitá-los!! Por isso existem recursos como cache, armazenamento de senhas, etc..., coisas que podem mesmo atrapalhar o desenvolvedor nos seus testes de comportamento, funcionalidades e desempenho de seu sistema!!
Se é esta a sua situação, seus problemas acabaram!! E isto não é uma propaganda das facas guinço ou das meias vivarina!! Com um bom navegador, como o Firefox, e armado de certos plugins, tarefas como inspecionar o heap do navegador, investigar a estrutura de dados de cookies, manipular os processos de rede, medir posicionamentos, colocar breakpoints em scripts, manipular dados de XMLs, etc., impossíveis (ou hercúleas!) em condições normais, passam a ser simplórias e, muitas vezes, divertidas. Acompanhe como, com um mínimo de plugins, você se tornará um mestre da web:

  • MeasureIt: Este parece ser um daqueles plugins de web designer que um desenvolvedor nunca vai precisar, mas, acredite, como ele é útil!! E simples!! O MeasureIt coloca um singelo botãozinho no extremo esquerdo da barra de status do Firefox. Ao clicar nele, sua tela fica semi-transparente e, com o mouse, você é capaz de desenhar uma régua de qualquer tamanho, capaz de medir a altura e largura de qualquer item na tela. A régua pode ser arrastada e redesenhada. Agora você não precisa mais ficar "chutando" quantos pixels pra lá ou quantos pra cá vc vai colocar até acertar os componentes no lugar certo (ou até perder a paciência e achar que já não tá mais tão torto)... meça, veja o numerinho e reposicione seus componente numa única e certeira vez!!
  • Firebug: Este é tão essencial que, se você não o tem, você não pode ser considerado um desenvolvedor web moderno. O Firebug faz tudo que você sempre sonhou em fazer e nunca achou possível. Com ele, vc pode ler e alterar instantaneamente toda a estrutura DOM da sua página (não o HTML fonte, mas o DOM mesmo, ou seja, tudo que foi montado dinamicamente e está apenas no heap do navegador); pode ler cada arquivo js da página, colocar breakpoints nele, avaliar os valores das variáveis e alterá-los, além de entrar com comando num console simples, acessando o mesmo heap; pode fazer estatísticas e monitoramento de rede e de desempenho de cada requisição HTTP (bom para saber qual imagem vem de outro domínio, ou qual componente demorar mais para carregar); pode avaliar toda a hierarquia de CSS e aterar seus valores; suporta perfis e configurações. Ele ainda marca de azul na tela o componente que vacê tá editando, pra saber que é mesmo este!! Realmente, é o mais importante de todos os plugins!
  • WebDeveloper: Outro plugin muito importante! Com ele, você é capaz de tudo o que o Firebug não se propõe. Você pode configurar tamanhos de tela, para mudar com um clique (800x600, 1024x768, etc...); pode examinar detalhadamente, todos os cookies, ou apagar ou editar os valores de um específico; pode habilitar ou desabilitar qualquer coisa: css, java, javascript, etc... pode até exibir os comentários e os campos hidden em plena página!! Ele tem inclusive uma régua semelhante à do MeasureIt, embora eu não a prefira! Sem dúvida, você não vai querer ficar sem este plugin!!
  • XML Developer: Assim como o Web Developer, o XML Developer segue a mesma linha, porém agora centrado em arquivos XML. Você pode não precisar deste plugin, caso não utilize arquivos XML, mas ele pode vir a ser útil. Com o XML Developer, você pode validar um arquivo XML contra um Schema pré-existente ou mesmo gerar um Schema ou um DTD a partir de um XML pré-existente (fantástico!); pode salvar seu XML ou Schema para o disco (ótimo para quem tem que lidar com tantos WSDLs externos ao seus sistemas e precisa saber o que eles estão fazendo de errado!!); pode gerar estatísticas diversas para um XML, aplicar um CSS à sua visão, dentre outras coisinhas.

Conclusão: com um navegador gratuito e robusto, como o Firefox, e poucos plugins igualmente gratuitos e poderosos, bem selecionados e propriamente instalados, é possível se desenvolver para a web com muitos mais agilidade, facilidade, confiança e, principalmente, qualidade.

Útil: você pode pesquisar outros plugins para o firefox, inclusive os não direcionados a desenvolvedores, olhando aqui!! Se tiver preguiça, veja estas sugestões.

7 comentários:

Valessio disse...

otimo post.. parabens!
eu conhecia todos, exceto MeasureIt.. de hoje em diante, eu nao vou ficar mais xutando os valores de pixel.. rs.. :D

João Roberto disse...

Também gostei do artigo.
Gostaria de sugerir outro plugin que uso bastante na construção de páginas web, que é o Colorzilla.

diogobaeder.com.br disse...

Oi, galera,
Como alternativa ao MeasureIt (que eu também já usei), basta ir na barra do WebDeveloper, clicar em "Miscellaneous" e depois em "Display Ruler", e você terá a mesma funcionalidade. (Eu particularmente gosto mais desta.)
Sobre o CollorZilla, há uns tempos atrás deixei de usar quando migrei para Linux - a extensão não fornecia suporte para esta plataforma, na época. Não sei como está agora.
Tentei instalar o XML Developer, mas funciona apenas em versões anteriores à atual estável (3.0.1, no momento desta escrita). Alguma outra sugestão de extensão semelhante?
Abração a todos!

kynder disse...

O Firefox no Joomla!CD vem com a maioria dessas extensões. O Joomla!CD não serve apenas para desenvolvimento com Joomla, mas também para PHP ou outra linguagem de sua preferência.

http://joomlacd.pquilinux.org

Abraços.

O Pajé disse...

Beleza, gente!
Diogo: eu prefiro a régua do MeasureIt porque é mais fácil de acessar e usar, agilizando o desenvolvimento. Ele realmente é um plugin muito bem feito: ágil, simples, pequeno e eficiente. Na hora de medir alguma coisa, é só clicar nele logo ali na base da janela e já sair medindo. A régua do WebDeveloper não é tão ágil de acessar; ela mostra as medidas longe da régua, o que pode causar um certo desconforto. Claro que é sempre uma questão de gosto pessoal, mas eu particularmente aconselho a todos terem o MeasureIt, não vão se arrepender.

diogobaeder.com.br disse...

Pajé: valeu pelo comentário... realmente, gosto é gosto, mas uma coisa é certa: o que nos ajuda a ter essa divergência saudável e construtiva de opiniões de aplicativos é o Software Livre... e viva o Open Source! :-)

O Pajé disse...

Falou e disse, Diogo!! Você está certíssimo!! Viva o software livre, que permite a devida liberdade de termos várias opções e usarmos o que mais nos agrada e favorece sem preconceitos ou imposições mercadológicas!! Excelente comentário!!