Funcionalidades da Web Developer Toolbar

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

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