Uma das mais úteis ferramentas que se pode utilizar no “webdesign” é a extensão Web Developer para o Firefox/Flock/Seamonkey. Trata-se de uma extensão que aconselho a instalar, já que temos accesso a um conjunto enorme de funcionalidades e ferramentas que pode tornar a vida mais simples.

Algumas funcionalidades ou ferramentas disponíveis:

  • Desactivar, consultar, validade, editar o código CSS e HTML
  • Obter informações sobre todos os elementos de uma página
  • Pre-visualizar a página para diferentes destinos, sejam PDA’s, ou outras resoluções.
  • Utilizar uma régua para medir distancias e elementos
  • etc.

Depois de instalada a extensão, iremos ter um novo menu e uma nova barra com várias ferramentas e opções.

barra do webdeveloper

Disable

No menu Disable podemos desactivar vários componentes do Firefox, como por exemplo a cache, javascript, java, as cores da página/site actual, etc..

Cookies

No sub-menu Cookies, encontramos várias funções relacionadas com as mesmas, tais como, visualizar cookies para uma determinada sessão num site, adicionar, apagar ou restringir cookies.

CSS

Um dos aspectos do webdesign que provoca maior dor de cabeças é os CSS(folhas de estilo) e a sua implementação pelos diversos browser/navegadores de Internet. Com estão extensão podemos ver directamente na página qual o CSS que está a ser utilizado e até podemos editar a folha de estilos no próprio Firefox e verificar imediatamente as alterações. Neste menu também podemos facilmente desactivar a folha de estilos CSS utilizada para verificar como o nosso site é visto por alguns bots, como por exemplo o GoogleBot…
web-developer-css-visualizar-estilos
Na imagem acima podemos verificar que um elemento do site foi seleccionado(1 a vermelho), neste caso o título de um artigo anterior, na barra do webdeveloper(2 a vermelho) temos o encadeamento dos vários elementos/secções do HTML, e na parte de baixo(3 a vermelho) temos o código CSS utilizado.

Forms

No menu Forms temos diversas funções disponíveis para os formulários. Podemos obter a informação e detalhes de todos os campos do formulário, mudar o método de GET para POST, ou vice versa, entre outras funções.
webdeveloper formulários - informação dos campos

Images

Como nas outras secções anteriormente referidas, no menu Images temos várias funções relacionadas com imagens. Podemos desactivar a visualização de imagens, verificar as dimensões, o caminho onde se encontram, o texto alternativo utilizado, etc.. Esta opção permite verificar que não esquecemos de nada importante relativo às imagens quando as utilizamos num site.

webdeveloper-imagens

Information

No menu Information podemos obter mais alguma informação da estrutura do/a site/página. Com as opções Display Id & Class Details e Display Element Information podemos ver as várias classes CSS e ID’s, que irá facilitar na edição do código CSS para correcção de algum detalhe.

webdeveloper-element-information

Outra opção útil é a visualização da ordem das várias div’s utilizadas no código HTML(Display div order).
webdeveloper-div-information

Podemos visualizar a palete de cores utilizadas ou visíveis na página(View Color Information), o tamanho dos vários ficheiros utilizados para construir a página(View Document Size), etc…

Neste menu podemos sobrepor guias para alinhar os vários elementos em grelhas(Display lines guides), utilizar uma régua(Display Ruler) para medir elementos, editar o código HTML e verificar imediatamente as alterações, verificar como fica o site/página em aparelhos portateis tipo pda(Small Screen Rendering).

webdeveloper-ruler

As opções deste menu servem para destacar alguns elementos da página, como cabeçalhos, links externos, frames, tabelas, células de tabela, blocos, etc..

Resize

Aqui podemos redimensionar o browser/navegador para outras resoluções para verificar que o site/página funciona correctamente. Podemos utilizar a função de zoom para aumentar determinada secção.

Tools

Neste menu temos várias opções para validar o CSS, Feed, HTML, verificar os links, a consola do Java e Javascript.

View Source

Como o próprio nome indica, serve para visualizar o código fonte. Podemos associar um editor para visualizar o código fonte através do menu Opções

Opções

Podemos aqui alterar o comportamento desta extensão e acrescentar mais algumas funcionalidades.

Download

Web Developer