Web Developer Toolbar - 10 utilidades

Sim, todo nós amamos o Web Developer Toolbar (disponível para Firefox). No entanto, a não ser que você tenha tirado algum tempo para explorar ele, provavelmente você está apenas utilizando nem metade do que esse “extension” pode fazer por você. Eu sei que eu estou.

No entanto, achei uma lista com 10 coisas que eu não sabia que esse adicional ao Firefox têm. Eis a lista do que você provavelmente também não sabia:

1) Mostrar linhas-guia (Miscellaneous - Display Line Guides)
Se você não está utilizando um grid como imagem de fundo para seu site, essa opção pode ser a melhor para você. Que nem as linhas-guias do Photoshop, Corel, etc, você pode adicionar linhas na horizontal ou vertical para verificar se tudo está alinhado de acordo com o seu gosto. Muito útil.

2) Ver informações de imagem (Images - View Image Information)
Existem muitas opções no menu Images. No entanto, gosto desta em particular pois permite que você veja as informações rapidamente de todas as imagens na página, incluíndo imagens de fundo, tudo listado com o endereço, dimensões e tamanho dos arquivos.

3) Ver informações de cor (Information - View Color Information)
Antes de descobrir o Colorzilla, eu dava um print-screen e colava no Photoshop para encontrar qual era uma determinada cor. Infelizmente, logo descobri que algumas vezes, a cor muda levemente quando feita dessa maneira. Mas eu me quebrava ás vezes utilizando o Colorzilla, especialmente quando existe uma imagem sobre o fundo que você quer verificar. Com essa opção do WDT, você vê uma página nova com todas as cores que estão no site. Facilidade ao extremo.

4) Mostrar informação de elemento (Information - Display Element Information)
Você também faz que nem eu, e seleciona determinado elemento e com o botão direito clica em “Ver fonte da seleção” (”View Selection Source”)? Então pare e aperte Ctrl+Shift+F e depois clique em um elemento para ver suas informações. Você também pode ver os elementos-pais daquele, que ajuda bastante na hora de especificar melhor algum estilo.

5) Ver informações da página (Information - View Page Information)
Essa opção abre uma janela pop-up com tudo quanto é informação da sua página, desde o básico até os detalhes de formulários, links e detalhes de imagens (tamanho do arquivo, dimensão e até um preview). A propósito, você pode selecionar a mesma opção clicando no “certinho” (esqueço o nome) verde do lado direito do toolbar.

6) Mostrar senhas (Forms - Show Passwords)
Embora eu não ache que seja exatamente algo útil para quem desenvolve, mas pode ser útil pra quem está acostumado a salvar as senhas através do Firefox para não ter que lembrá-las. É só selecionar a opção que todas as caixas de senhas tornam-se visíveis.

7) Preencher formulários (Forms - Populate Form Fields)
Muito útil na hora de testar formulários. Em vez de digitar “asdfasdf” nos campos (e muitas vezes, são muitos campos pra preencher só pra testar), é mais fácil selecionar essa opção e ter tudo preenchido pra você.

8) Renderizar para telas pequenas (Miscellaneous - Small Screen Rendering)
Já se perguntou como seu site vai ficar em aparelhos móveis (celulares, palmtops, etc)? Essa opção lhe dá uma idéia próxima de como vai ficar. E isso nos dias de hoje está se tornando mais e mais importante. Bom, pelo menos lá fora. A propósito, o site da Digital Paper fica bem legível até para aparelhos móveis.

9) Marcar todos links como não-visitados/visitados (Miscellaneous - Visited Links - Mark All Links Unvisited / Visited)
Muito útil por um bocado de razões. Por exemplo, você quer tirar um print-screen do seu site com os links em seu estado natural. É só selecionar essa opção e pronto! Muito mais fácil do que ter que limpar o cache do navegador (especialmente se você não quer perder tudo no cache).

10) Teste de velocidade (Tools - View Speed Report)
Esse serviço mostra quanto tempo seu site demora para carregar em diferentes tipos de conexão, além de te mostrar quanto tempo o HTML, o HTML com imagens, o CSS com imagens, e o total das imagens demoram pra carregar. Ele até dá ótimas dicas quando encontra algo que parece atrasar um pouco o download do site. Simplesmente ótimo.

Fonte: Smiley Cat (adaptado e traduzido por Canha)

E você? Conhece alguma opção dessa extensão que lhe é muito útil?