Pinceladas da Web

A Web Developer Toolbar, desenvolvida por Chris Pederick, é uma das ferramentas mais úteis ultimamente para auxiliar no desenvolvimento web, atuando em conjunto com o Firebug. Mas para utilizá-la você precisa do Firefox, se você ainda utiliza o Internet Explorer, esqueça, pare de ler esse post.

Após instalar a barra, reinicie o Firefox, você verá que a partir de agora existe uma nova barra abaixo da barra de endereços composta dos seguintes botões: Desativar, Cookies, CSS, Formulários, Imagens, Informações, Outros, Destacar, Redimensionar, Ferramentas, Código-Fonte, Opções.

Desativar

Permite desativar funcionalidades de uma página web, tais como Cache, Java, JavaScript, Redirecionamentos Meta, Bloqueadores de Popup entre outras opções. Dois itens que merecem destaque são o Desativar o envio do endereço (referrers) permitindo navegar de forma privada na web, e Desativar Cache, onde ao efetuar atualizações em uma página web você tem certeza de que sempre estará vendo a última versão da página.

Cookies

Lhe proporciona a opção de manipulação de cookies em sites que o utilizam, uma opção em destaque é a de que você pode adicionar seu próprio cookie a qualquer site.

CSS

O grande destaque dessa opção é a de Editar CSS, onde você pode editar o CSS de qualquer site e ver as atualizações em tempo real, além de opções como desabilitar o CSS externo ou embutido na página (inline).

Formulários

A opção de destaque é a de Visualizar informações dos formulários, com essa opção ativa você terá informações avançadas sobre os formulários em questão na página. Você também pode utilizar a opção Preencher campos do formulário para preencher os campos automaticamente, além de poder converter qualquer campo select em uma página em campo de texto.

Imagens

Você pode usar oções de desabilitar quaisquer imagens do site, relatório de imagens quebradas (urls de imagens não encontradas), além de visualizar informações sobre as imagens, onde você tem acesso a um relatório com todas as imagens utilizadas na página, inclusive as inseridas via CSS.

Informações

Nesse menu você terá informações sobre praticamente todos os elementos da página como: info sobre accesskey, nomes de ids e classes na página, ordem das divs na página, visualização de todo o JavaScript da página, cabeçalhos de resposta do servidor.

Outros

Possui opções interessante para auxiliar no desenvolviemnto como: Linhas guia, semelhantes a do Photoshop, Lente de aumento, Caixa auxiliar, que perimite que você insira uma grade na página. Possui uma opção para Exibição em telas pequenas, que simula seu site em dispositivos móveis.

Destacar

Essa opção é utilizada para destacar os elementos da página. Pode ser útil para você descobrir o por que de uma página não estar sendo exibida corretamente. O grande destaque dessa opção é o de Destacar elementos obsoletos, experimente abrir o Google e ativar essa opção.

Redimensionar

Possui a opção de você criar tamanhos personalizados para a tela do seu browser, bom para poder verificar como seu site se comportaria em diferentes resoluções.

Ferramentas

Proporciona opções desde validação do HTML até Acessibilidade. Opções de inspecionar o DOM, além de um console de erros que lhe mostra todos os erros ocorridos no JavaScript, HTML e CSS.

Código-Fonte

A partir desse menu você pode ver o código fonte da página, e o destaque é para a opção Visualizar código-fonte gerado, onde você vê também o código html que é gerado pelo JavaScript.

Menu Opções

Possui opções de configuração da Web Developer Toolbar.

Botões de Validação

Esses botões lhe mostram possíveis erros em sua página. O primeiro mostra se sua página está em modo Standard Compliance ou Quirks mode, o segundo erros de CSS e o terceiro possíveis erros de JavaScript.

Bonus

Abaixo vocês podem ver dois vídeos tutoriais sobre utilização da Web Developer Toolbar:

Infelizmente explicar aqui cada item da Web Developer Toolbar é impossível, isso daria um livro, mas tentei destacar aqui opções das quais acho interessante.