Web developer toolbar, DOM Inspector, InspectThis e Venkman: ferramentas indispensáveis ao desenvolvedor web
Se você pensa que o Firefox é apenas um bom navegador com bom suporte aos padrões web você está redondamente enganado. Muito mais que isso, ele é uma ferramenta de auxílio ao desenvolvedor web. Não o browser em si, mas algumas das extensões desenvolvidas para ele.
Se você trabalha escrevendo código client side ([X]HTML, CSS, JavaScript) e ainda não usa o firefox não só está deixando de atender um público hoje bastante expressivo como está perdendo uma grande oportunidade de se tornar mais produtivo.
Entre todas as ferramentas que uso no meu dia-a-dia de desenvolver, testar e depurar código HTML, CSS e JavaScript, destaco quatro extensões do firefox sem as quais eu não sei como conseguiria viver. São elas a web developer toolbar, o DOM Inspector e sua companheira InspectThis e o Venkman. Vamos dar uma olhadinha nelas:
Web developer toolbar
Essa é uma velha conhecida. Se você ainda não a conhece, saiba que é um verdadeiro cinto de utilidades para o desenvolvedor web, com um sem número de funcionalidades indispensáveis ao alcance de um clique (ou uma tecla de atalho).
Dentre todas essas funcionalidades, algumas merecem destaque especial:
- Desabilitar recursos
- Nesse grupo de ferramentas, você tem a possibilidade de desabilitar o suporte a Java e JavaScript, cores (ótimo para testes de acessibilidade), cache e outras coisas mais.
- Cookies
- Ótimo para descobrir problemas envolvendo cookies. Tem as opções de apagar, visualizar e até criar cookies na hora.
- CSS
- Com um clique você visualiza todos os estilos CSS aplicados à página, tanto os externos quanto os internos e até os inline. Com outro clique você tem a possibilidade de editar esses estilos e verificar os resultados na hora. Excelente para testes rápidos.
- Imagens
- Aqui você pode desabilitar completamente o suporte a imagens (também muito bom para testes de acessibilidade), visualizar o conteúdo dos atributos alt, dimensões, tamanho dos arquivos de imagens e outras funcionalidades interessantes envolvendo imagens.
- Miscelânea
- Limpar o cache e histórico do navegador, exibir comentários, elementos escondidos e o mais legal, editar o código HTML, da mesma forma que você edita o CSS, verificando os resultados “on-the-fly”.
Além disso tem funções para manipulação de formulários, atalhos para validação de HTML, CSS e feeds, redimensionamento da janela do navegador, visualização do código após a aplicação de scripts, etc.
Não vou expandir aqui todas as funcionalidades pra não tornar o texto longo demais. Recomendo que você instale agora essa extensão e explore suas funcionalidades. Vai fazer toda a diferença no seu dia-a-dia.
DOM Inspector
Eu me assusto ao ver que a maioria dos desenvolvedores não usa essa maravilha de extensão. Se ela não existisse eu acho que já teria desistido de ser desenvolvedor web…
O DOM Inspector é um painel que exibe pra você a árvore de elementos criada pelo navegador ao renderizar a página. Ele se torna especialmente útil quando você precisa resolver problemas em códigos feitos por outras pessoas ou códigos feitos por você mesmo há muito tempo e que não estão muito bem organizados.
O DOM Inspector é uma extensão para o Firefox, mas ele vem junto com o pacote de instalação do navegador. Basta na hora de instalar escolher o método personalizado de instalação e marcar “Developer tools”, que deve ser algo mais ou menos como “Ferramentas de desenvolvedor” na versão em português.
Para usá-lo, entre na página em questão normalmente e vá no menu “Tools” ou “Ferramentas” e clique em “DOM Inspector”. Se preferir você pode usar a combinação de teclas “Ctrl+Shift+I”.
A janela do DOM Inspector tem dois painéis. O da esquerda exibe a árvore de elementos, como se fosse uma árvore de diretórios e a da direita exibe as informações sobre o elemento selecionado.
Na parte superior do painel da direita há um botão, com uma setinha para baixo, que se parece muito com o ícone de “Organizar ícones” do Windows Explorer. Esse botão serve para mudar o tipo de informação que será exibida sobre o elemento em questão.
Das informações que podem ser analizadas as minhas preferidas e mais usadas são:
- “CSS Style Rules”
- Mostra que propriedades CSS estão sendo aplicadas ao elemento, em que arquivo elas se encontram e, o mais importante, em que linha do arquivo. Assim fica fácil achar e resolver problemas de CSS.
- “Computed Style”
- Exibe os valores das propriedades de estilo do elemento após todos os cálculos feitos pelo navegador. Nessa conta entram modificações feitas via CSS, atributos do elemento e scripts.
Sugiro que você instale imediatamente o DOM Inspector caso ainda não o tenha feito, e comece a usá-lo. E para facilitar ainda mais a sua vida, instale uma extensão chamada InspectThis, que é um atalho para o DOM Inspector. Ela adiciona o ítem “Inspect Element” ao menu contexto. Clique com o botão direito sobre qualquer elemento de uma página, selecione “Inspect Element” e o DOM Inspector será aberto já com o elemento selecionado. Uma mão na roda.
Eu acho que o DOM Inspector merece um post só para ele. Vou me esforçar para escrever um. Comentários de você podem ajudar a me motivar. 
Venkman
Venkman é um JavaScript Debugger desenvolvido pela Fundação Mozilla. Não é exatamente uma perfeição, mas ajuda bastante.
Às vezes coisas estranhas acontecem com scripts JavaScript e nem sempre uma olhada no código é suficiente para detectar o problema.
Se você não está familiarizado com debuggers, funciona mais ou menos assim:
Você abre a página problemática no navegador, vai no menu “Tools” ou “Ferramentas” e clica em “JavaScript Debugger”.
No painel da esquerda estão listados todos os scripts aplicados à página, numa organização em árvore, tal qual o que você vê no DOM Inspector. Ao expandir um script, aparecem todas as funções contidas nele. Um duplo clique na função exibe seu código no painel da direita.
À esquerda do código são exibidos os números de linha e à esquerda deles uma coluna cinza com alguns hífens, que marcam as linhas onde podem ser definidos “breakpoints”. Breakpoints servem para marcar o local onde a execução do script deve ser interrompida para o debugger entrar em ação.
Existem dois tipos de breakpoints no venkman. Hard Breakpoints e Future Breakpoints.
- Hard Breakpoints
- São identificados por um “B” com fundo vermelho e são breakpoints normais. Simplesmente fazem parar a execução nequele ponto e colocam o debugger para funcionar.
- Future Breakpoints
- São identificados por um “F” com fundo alaranjado e funcionam um pouco diferente dos hard breakpoints. A diferença é que hard breakpoints só podem ser definidos dentro de funções. Ao expandir um script no painel da esquerda você vai notar que, em geral, o primeiro item desse script é chamado “__toplevel__”, que é o código que está dentro do script, mas fora de qualquer função. Nesse “top level” só é possível definir future breakpoints. Após recarregar a página, se o browser passar por aquela linha e nela houver código executável, ele vai funcionar como um hard breakpoint, parando a execução e colocando o debugger em ação.
É meio estranho, concordo. Você vai entender melhor ao usar, portanto, faça testes.
No painel da esquerda, abaixo da árvore de script e funções, há duas “janelinhas”.
A primeira exibe, na aba “local variables”, as variáveis e seus respectivos valores no momento da execução e, na aba “watches”, permite que você defina variáveis que você deseja inspecionar separadamente, assim que elas passarem a existir.
A segunda exibe os breakpoints e o “call stack” que é a lista de funções ativas naquele momento.
Vale a pena instalar o venkman e começar a usá-lo para descobrir com usar eficientemente suas funcionalidades. Se vocês acharem que é necessário um post separado pra explicar com mais detalhes seu funcionamento, digam isso nos comentários. Por enquanto, se você fala inglês, dê uma lida nesse ótimo tutorial sobre o Venkman que explica praticamente tudo sobre o debugger.
Por fim, antes que alguns de vocês reclamem, sim, eu sei que essas extensões não estão disponíveis apenas para o Firefox. Podem ser usadas, também, no Mozilla. Mas eu as uso no Firefox e não posso dizer nada sobre o seu funcionamento em outro browser.
27 Mai 2006 |
13 comentários... |
Comentar |
|
Essas extensões que auxiliam o desenvolvedor são realmente fantasticas! Mesmo sem ser um, uso bastante a exensão Web developer toolbar. Com ela pude aprender muitas coisas fuçando sites da vida.
As outras eu não conheciam. O jeito é instalar e fazer alguns testes.
Abraço