Funcionalidades da Web Developer Toolbar
Publicado em: 2007-07-12 — 29.668 visualizacoes
Na minha opinião uma das mais fantásticas e úteis ferramentas de desenvolvimento Web é a WDT – Web Developer Toolbar ou Barra de Ferramentas do Desenvolvedor Web.
Muitos artigos têm sido escritos sobre esta ferramenta (google: web developer toolbar) e a maioria dos desenvolvedores a tem instalada e usam-na com freqüência. Mas, como acontece com quase todos os softwares e programas em geral, as funcionalidades desta ferramenta transcendem ao corrente uso diário que estamos acostumados dela fazer. Ressalvado os casos daqueles que tiveram a curiosidade de explorar com detalhes todas as funcionalidades da barra (o que tenho certeza não é o caso da maioria), você provavelmente está usando-a muito aquém de suas reais possibilidades.
Eu mesmo somente descobri todas as suas possibilidades após algum tempo de uso.
Funcionalidades que talvez você não conheça.
1. Mostrar as cores usadas na página
Você usa a ferramenta Colorzilla?
A funcionalidade da WDT no menu Information » View Color Information… substitui com vantagens a ferramenta Colorzilla. Ela abre uma nova janela apresentando uma amostra de TODAS as cores usadas na página e o respectivo código hexadecimal da cor. Collorzilla para mim só para uma referência rápida, mas mesmo assim totalmente dispensável.
2. Personalizar as dimensões de redimensionamento da janela
Quando da instalação da WDT as opções de redimensionamento da janela, para fins de testes da página em diferentes resoluções por default estão limitadas a 800×600 e 1024×768.
Você tem duas opções de personalização de redimensionamento da janela
- Aplica-se quando você quer testar eventualmente determinada dimensão.
Menu Resize » Resize Window…. Abre um popup onde você digita as dimensões da janela (resolução). Marcando a opção Resize the viewport… as dimensões escolhidas serão aplicadas a área da página somente, isto é não serão computadsa as áreas de menus e rodapé do navegador. - Aplica-se quando você quer testar exaustivamente uma determinada resolução.
Menu Resize » Edit Resize Dimensions…. Abre um popup para edição das dimensões da janela (resolução). Aqui você coloca as dimensões de teste no menu Resize. A diferença para a situação anterior é que as dimensões permanecerão disponíveis no menu (mesmo que você reinicie sua máquina) até que você decida removê-las de lá.
3. Editar o HTML
A edição das CSS é talvez a mais usada e conhecida funcionalidade da barra. Você sabia que é possível editar o HTML da página tal como se faz com as CSS? Sim você modifica o HTML e vê instantaneamente o resultado!
Menu Micellaneous » Edit HTML. Abre uma espécie de frame para edição do código da página, tal como acontece com a edição das CSS.
4. Posicionar “frames” de edição do HTML e das CSS
Os “frames” de edição do HTML e das CSS são posicionados por default ao longo do lado esquerdo do navegador. Contudo você pode escolher a posição que achar melhor entre à esquerda, à direita, abaixo e acima. Eu gosto da posição default à esquerda, mas algumas vezes para edição das CSS e todas as vezes para edição do HTML eu posiciono o “frame” abaixo, para minimizar a necessidade de barra de rolagem horizontal no “frame”.
Veja onde clicar para mudar a posição dos “frames” de edição das CSS 
e do HTML 
5. Caixa de busca na edição das CSS e do HTML de uma página
Esta é uma funcionalidade que eu uso com freqüência e destina-se a encontar determinado seletor no "frame" de edição. É comum a necessidade de conhecido um seletor ou elemento no código, encontrá-lo no “frame” para edição seja das CSS ou do HTML. Para isto use a caixa de busca existente no “frame de edição” 
.
6. Validação por atacado
Com toda certeza você conhece as funcionalidades de validação sobre o menu Toolsonde você pode validar HTML, CSS, Acessibilidade, Links e Feeds e talvez já tenha usado muitas vezes. Você sabia que existe uma funcionalidade que valida de uma só vez o HTML, as CSS e a Acessibilidade?
Menu Tools » Display Page Validation. Acionando este menu aparece uma barra extra logo abaixo da WDT mostrando o resultado de cada uma das validações mencionadas.
Clicando sobre os ícones na barra extra mostrada acima você será direcionado ao validador para detalhes da validação.
7. Imagens “desaparecem” na edição das CSS
Você já deve ter notado que ao abrir o “frame” de edição das CSS freqüentemente causa o “desaparecimento” de imagens na página. Isto ocorre para as imagens definidas nas CSS e o desenvolvedor adota o caminho relativo (e não absoluto) para o endereço das imagens, prática que é adotada por quase todos.
Algo do tipo background: #fff url(imagens/nomedaimagem.gif) center no-repeat;.
Você pode recuperar as imagens “desaparecidas” colocando no “frame” de edição o caminho absoluto das imagens da seguinte maneira:
- Identifique no “frame” de edição das CSS o caminho relativo das imagens de fundo. Normalmente algo como
/imagens/nomeda imagem.gif - Acione o menu Images » View Image Information para abrir uma janela mostrando as imagens contidas na página e o caminho absoluto delas, algo como
http://www.nomedosite/.../imagens/nomedaimagem.gif - Marque com o mouse tudo que estiver antes do caminho relativo. No exemplo mostrado seria acima
http://www.nomedosite/.../e tecle CTRL + C (Copiar) - Agora vá no “frame” de edição e “cole” (Ctrl + V) o path absoluto antes do caminho relativo.
E a sua dica?
Estas são algumas das inúmeras funcionalidades que normalmente permanecem “adormecidas” na WDT. Muitas outras estão disponíveis. Você quer compartilhar alguma dica que considera não comum e interessante? Poste nos comentários.
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2007-07-12 (quinta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2007/07/12/funcionalidades-da-web-developer-toolbar/trackback no seu site.
Atualizei para o Firefox 6 e percebí que na resolução 1024 x 768 dá diferença de um pixel em relação ao Firefox 3.6 que eu utilizava anteriormente. O que cria barra de rolagem horizontal em sites que não tinham. Alguém mais percebeu isto? Alguma solução?
[…] 1) Entendendo a Web Developer Tools: Plugin fantástico para firefox, permite edição de códigos com preview real, validação facilitada, acesso rápido ao css da página e muito mais. Na verdade, são poucos os que a utilizam da maneira correta (e com todos os recursos). Portanto, neste post do blog do maujor, a ferramente é devidamente dissecada. Enjoy […]
Caramba…
Eu tenho essa barra de ferramentas a mais de 3 meses e não sabia da metade das funcionalidades dela… Quanta ignorância.. e Quanta preguiça de explorar aquilo que esta a minha disposição para me auxiliar!!!
Muito obrigado, e podem ter certeza que vou explorar muito mais as minhas ferramentas daqui em diante!!!
Um grande abraço
Realmente muito útil as 2 barras, Firebug é perfeito ainda mais para se descobrir erros que você fica “15 horas” quebrando a cabeça. Quanto ao WDT, verificações da página sem css e mais um monte de funções são bem interessantes.
Bom artigo.
Mais um motivo para utilizar o Firefox para desenvolver sites.
Valeu!!!
Eu também uso muito a WDT, mas o que eu mais gosto é a Display Line Guides, para alinhar corretamente meus designs entre o IE e o Firefox (mania de perfeccionismo x imcompatibilidade Microsoft & Mundo …)
Outra coisa sobre o firebug é que a Yahoo entrou na equipe de desenvolvimento dele… Agora o negócio decola de vez….
Eu tenho essa barra no meu Firefox gostei muito alguem sabe se tem IE7 ?
Por exemplo com o firebug eu não consigo ver e editar os cookies do domínio?
Muito bom, Maujor.
Realmente há algumas funções que acabo não aproveitando…
Mas a extensão que tenho mais utilizado, com certeza, é a Firebug, que se tornou a mais importante para mim nos últimos tempos, claro, ao lado da WDT.
Eu trabalho com acessibilidade e usabilidade a pouco mais de um ano. Sempre utilizei o FIREBUG e o Web Developer Toolbar. O problema é que o FIREBUG não dá suporte completo que o WDT dar. Ex. Desabilitar o javascript de sua página para assim testar nos browsers que não funcionam, desabilitar CSS, entre outros. A função do firebug como o próprio nome já diz é procurar, debugar, encontrar ERROS. Maujor, muito bom a materia.
Parabéns.
Vou indicar a alguns amigos.
Muito bom não conhecia e vou experimentar.
Depois vou tentar também o firebug. Pelo que o colega disse acima parece ser uma boa ferramenta também.
Muito boa sim, mas vale lembrar o Firebug, que acho melhor que ela em algumas funcionalidades, os dois plugins se completam
[…] […]
Outra boa combinação é habilitar o recurso Outline / Show Element Names When Outlining e depois usar qualquer outra opção do botão Outline. Dessa maneira irá aparecer também o nome das tags que estiverem contornadas.
@Edy Segura
Foi isso que eu quis dizer… Elas se completam… Porém, SEM a WDT eu consigo alterar os cookies via browser, validar a página via site…. Mas SEM o Firebug eu não consigo editar o CSS sem o problema das imagens citado no post, não consigo utilizar os inúmeros recursos para javascript(que é o ponto forte do FIREBUG), não consigo o recurso que o o botão “INSPECT” me proporciona….
Eu quis dizer que, para mim, o FIREBUG é Essencial e a WDT é muito útil mas dispensável… =)
Complementando o comentário do display ruller. Para comparar pequenas diferenças pode-se usar um outro recurso da WDT, que é o Miscellaneous / display page magnifier que funciona como uma lupa, muito útil para alguns casos.
Também gosto bastante da WDT, e realmente tem bastante coisa útil, recentemente descobri a display ruler, que pode ser usada ao invés da extensão “MeasureIt”. Das cores acabei de aprender com esse post, uma extensão a menos no meu FF.
ps.: Parabéns pelo site, a muito tempo o uso como referência.
Eu já acho que as duas extensões são complementares. Por exemplo com o firebug eu não consigo ver e editar os cookies do domínio, não limpa a cache, não desabilita o javascript para testar a acessibilidade da página. Um recurso que eu uso muito na WDT é Form > View form information para ter um relatório completo dos valores do formulário.
Não consigo viver sem essas duas extensões que na minha opinião são complementares. []’s
Outra coisa sobre o firebug é que a Yahoo entrou na equipe de desenvolvimento dele… Agora o negócio decola de vez….
Eu acho o FIREBUG muito melhor…. A edição de CSS dele é muito boa e não desaparece imagem nenhuma… Dá uma estudada nele(www.getfirebug.com)… Vale muito a pena. Tenho a WDT e só uso para validação pq o resto o FIREBUG supre totalmente, e ainda tem muitas funcionalidades para JAVASCRIPT extremamente úteis…