Blog do Maujor - Tutoriais e pensamentos, CSS, web standards, acessibilidade, tableless


Funcionalidades da Web Developer Toolbar

Publicado em: 2007-07-12 — 18.583 visualizacoes

    

Screenshot parcial da Barra de Ferramentas do Desenvolvedor Web

Na minha opinião uma das mais fantásticas e úteis ferramentas de desenvolvimento Web é a WDTWeb 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

  1. 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.
  2. 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 Menu edit CSS e do HTML Menu edit 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” Menu edit busca.

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.
Resultado de validação

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.

----------------x-x-x---------------    fim da matéria    ---------------x-x-x---------------

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique o livro para detalhes.



capa livro javascript   capa livro html   capa livro css   capa livro jquery   capa livro ajax-jquery
capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG

Enquete

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.

21 comentários na matéria: “Funcionalidades da Web Developer Toolbar”

  1. Carlos disse:

    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…

  2. Carlos disse:

    Outra coisa sobre o firebug é que a Yahoo entrou na equipe de desenvolvimento dele… Agora o negócio decola de vez….

  3. Edy Segura disse:

    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

  4. Northon disse:

    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.

  5. Rodrigo disse:

    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.

  6. Carlos disse:

    @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… =)

  7. Rodrigo disse:

    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.

  8. Web Developer Toolbar disse:

    [...] [...]

  9. Bernardo disse:

    Muito boa sim, mas vale lembrar o Firebug, que acho melhor que ela em algumas funcionalidades, os dois plugins se completam

  10. Clauber disse:

    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.

  11. Alex Batista disse:

    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.

  12. Carlos Eduardo disse:

    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.

  13. HOSPE disse:

    Por exemplo com o firebug eu não consigo ver e editar os cookies do domínio?

  14. Web disse:

    Eu tenho essa barra no meu Firefox gostei muito alguem sabe se tem IE7 ?

  15. Gustavo - Impressora de cheque disse:

    Outra coisa sobre o firebug é que a Yahoo entrou na equipe de desenvolvimento dele… Agora o negócio decola de vez….

  16. Marcos Watanabe disse:

    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 …)

  17. Mateus disse:

    Bom artigo.
    Mais um motivo para utilizar o Firefox para desenvolver sites.
    Valeu!!!

  18. Felipe Coelho disse:

    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.

  19. Brugraph disse:

    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

  20. Design.com.br » Links úteis para designers de web disse:

    [...] 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 [...]

  21. Luiz disse:

    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?

Comentário:





Subscrição de comentários sem comentar

Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Voltar ao topo

PR Tool


ir topo