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.

13 Comentários sobre “Web developer toolbar, DOM Inspector, InspectThis e Venkman: ferramentas indispensáveis ao desenvolvedor web”

Faça um comentário

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


#2 | Leonardo Quixada

Po, nem li o artigo pq ja conheco essas ferramentas tudim. Mas senti falta da MELHOR ferramentas de todas (ta, ok, so equiparando ao Webdeveloper Toolbar): o FIREBUG (https://addons.mozilla.org/firefox/1843/). Ela substitui facilmente o DOM Inspector, o InspectThis e o Venkman.

Fica ai a dica registrada! Abracao!


Muito bom o post, só está faltando um tutorial detalhado sobre o DOM Inspector.

Abraços!!!


Postei isso no meu blog… dá uma sacada lá depois!!!

Mesmo assim… muito bom artigo.. mais completo…


Bruno, concordo com suas colocações iniciais quanto a produtividade. Ha pelo menos 8 meses uso a extensao “webdeveloper” para desenvolver nao me vejo utilizando outras ferramentas (leia-se softwares pagos) tanto de “debug” como de edicao do CSS, dentre outros.

Mas, em um “mundo paralelo” onde as pessoas nao procuram entender o que estao fazendo com o [x]html e se “bitolam” ao que o dreamweaver oferece, este post pode soar como algo surreal :)


#6 | Alexandre Nunes

Belo artigo Bruno, é sempre bom conhecer novas ferramentas para facilitar o trabalho. Existe uma outra extensão chamada Fire Bug (https://addons.mozilla.org/firefox/1843/) que também é ótima. Ela inspeciona o código HTML, CSS e Javascript, além de debugar este último. Vale a pena dar uma olhada! Abraços!


#7 | Danilo Costa

Show de bola, facilitam e muito essas ferramentas.

Mais uma grande dica Brunão :-)

Solta o resto que está na manga aí…

[]’s


#8 | Paulo

Ótimo post!
Percebi que mesmo com o aumento extraordinário de domínios, blogs e internet em geral, vemos que muitos dos profissionais de desenvolvimento web não estão acompanhando e utilizando novas formas de construir sites mais leves, compatíveis e acessíveis.
E acho muito importante que vc como profissional além de adotar novas tecnologias, consiga transmitir seu conhecimento à outros.
Seria uma boa idéia um outro post, sobre como utilizar melhor o web develop toolbar.
Um abraço


Bruno, muito interessantes esse post, gostei bastante. Ainda não usava essas extensões, mas pretendo usálas.
Agora, não consegui instalar o dom ispector(não vi nenhum link de “download para firefox” lá no endereço indicado), se alguém puder dá uma força, ficaria muito grato.
Meu email: thiagocodu[@]gmail.com


Parabéns por mais um excelente post. uso a Webdeveloper Toolbar e a recomendo…

Abs;

Alex Camillo


Sensacional! hahahahahah

Muito bom mesmo, facilita e tanto!


#12 | rangell santana

se era um comentário que faltava pode pra um topico especial eu tou fazendo minhas parte!

parabéns!


Só existe uma coisa melhor que essas extensões,
o canivete do magaiver (bem novinho). rs..

Parabéns, muito bom o post.

Gabriel Ramalho


«

»

Deixe seu comentário