Extensões do Firefox recomendadas para desenvolvedores web

Post movido para: http://blog.guilhermegarnier.com/2009/01/06/extensoes-do-firefox-recomendadas-para-desenvolvedores-web/

Quase todo usuário de Firefox que tem um blog já postou uma lista de extensões recomendadas. Chegou a minha vez! Sei que muitas aqui já são velhas conhecidas da maioria, mas acho interessante ressaltar a importância. Hoje em dia é difícil imaginar o desenvolvimento web sem o auxílio do Firefox. Segue abaixo a lista de extensões que eu recomendo:

  • Firebug
    Como não poderia deixar de ser, o primeiro da lista, e totalmente indispensável, é o Firebug. Seria até exagero chamá-lo de extensão, pois o Firebug é uma verdadeira plataforma para debug de aplicações web. Com ele é possível, além de inspecionar visualmente o código HTML, seja diretamente pelo código, seja selecionando o componente visual associado a ele, é possível modificar o código, alterando, excluindo ou incluindo tags, e o resultado aparece em tempo real. O mesmo pode ser feito com os códigos Javascript e CSS da página. Há também um console para debug; é possível utilizar o comando console.log(“texto”) no seu código Javascript, e durante a execução, o texto será exibido no console do Firebug. Também é possível visualizar o resultado de todas as requisições, incluindo arquivos carregados (imagens, arquivos CSS, Javascript e Flash) e chamadas assíncronas (Ajax), exibindo o cabeçalho da requisição, o resultado, o tamanho do arquivo e o tempo de resposta. Esta extensão é tão poderosa que há extensões para ela, como o YSlow, do Yahoo, que exibe estatísticas de desempenho da página.

    Como o Firebug é só para Firefox, foi lançada uma versão Lite que também funciona com IE, Opera e Safari. Nunca testei esta versão, porém acredito que seja uma boa alternativa para debugar problemas que aconteçam num destes browsers mas não no Firefox. Nesse mesmo link é disponibilizada uma versão do Firebug Lite como bookmarklet. Basta arrastar o link para a barra de bookmarks do Firefox para poder utilizá-lo sem precisar instalar o Firebug.

  • Web Developer
    Esta extensão é uma das mais úteis no desenvolvimento web. Entre as opções disponíveis, ela permite visualizar o CSS da página, cookies, bloquear imagens e muitas outras funções.
  • Poster
    O Poster é uma extensão simples, porém muito útil para testar Web Services. Ele exibe uma janela com opções para digitar a URL de destino, o tipo de requisição (GET, POST, PUT ou DELETE), o body e os parâmetros. Feita a requisição, é possível visualizar a resposta recebida.
  • JavaScript Debugger
    Extensão muito poderosa, que exibe uma janela listando todos os arquivos Javascript da página atual. Pode-se definir breakpoints no código e executá-lo passo a passo, verificar e alterar valores de variáveis e tudo o que se espera de uma ferramenta de debug.

    Javascript Debugger

    Javascript Debugger

  • Greasemonkey
    Uma das extensões mais conhecidas, permite criar scripts usando Javascript para modificar o comportamento de sites específicos. O site Userscripts.org possui centenas de scripts pré-definidos para vários sites conhecidos. Com o Greasemonkey, você pode até mesmo ajudar a Vivo a adicionar suporte a HTML no Firefox.
  • Greasefire
    Extensão que adiciona ao Greasemonkey uma funcionalidade de busca automática de scripts para o domínio atual no Userscripts.org. Ao clicar no ícone do Greasemonkey, aparece uma nova opção no menu, que, ao ser selecionada, exibe em uma nova janela a lista de scripts encontrados.
  • CSSViewer
    O CSSViewer exibe todas as propriedades CSS dos elementos da página atual num div flutuante, conforme o cursor do mouse é movido pela tela.
  • X-Ray
    Mais uma extensão simples e útil. O X-Ray permite visualizar o código fonte de uma página sobre a própria. Desta forma, as tags HTML se misturam aos elementos da página, permitindo visualizar exatamente onde se localiza cada elemento do fonte, apesar de a visualização ficar um pouco confusa.
  • Live HTTP Headers
    Exibe numa janela os cabeçalhos HTTP de cada requisição, auxiliando na verificação de erros de rede. As informações dos cabeçalhos também podem ser exibidas numa barra lateral, e as URLs das requisições que serão analisadas podem ser definidas como expressões regulares.

    Live HTTP Headers

    Live HTTP Headers

  • Aardvark
    Esta extensão permite excluir elementos da página com um clique. É muito útil para acessar sites muito poluídos, com excesso de elementos na tela, ou quando há algum elemento sobrepondo outro, no caso de erros de visualização de sites que não foram testados no Firefox. Também pode ser utilizado para remover elementos desnecessários antes de imprimir uma página.
  • MeasureIt
    Exibe uma régua para contagem de pixels de um elemento. Útil para ajustes finos no design.
  • JSView
    Exibe um ícone no rodapé do Firefox. Ao clicar nele, é possível visualizar automaticamente todos os arquivos CSS e Javascript da página atual. Pouco útil caso você já utilize o Firebug.
  • ErrorZilla Mod
    Quando uma página estiver inacessível, esta extensão exibirá uma tela alternativa de erro, com opções para consultar esta página no Google Cache, tentar ping e trace, entre outras opções.

    ErrorZilla Mod

    ErrorZilla Mod

  • CheckBoxMate
    Permite marcar vários checkboxes de uma vez, através de drag & drop. Esta extensão não tem qualquer relação com desenvolvimento web, mas resolvi incluir na lista pois acredito que pode ser útil, por exemplo, quando se deseja selecionar vários emails no seu webmail.
  • Stylish
    Praticamente um Greasemonkey para CSS. Permite criar folhas de estilo para URLs específicas e pesquisar no Userstyles.org por estilos pré-definidos para o domínio atual.
  • ColorZilla
    Permite descobrir o código RGB da cor do elemento atual, fazer zoom de até 1000% na página (para facilitar a seleção de um elemento específico) e selecionar cores numa paleta, entre outras opções.
  • PDF Download
    Converte páginas Web para PDF, além de permitir selecionar a ação desejada ao clicar em um arquivo PDF (download, abrir com o programa padrão, abrir no browser).

Além de muitas extensões úteis, existem outras nem tanto. A extensão mais inútil para Firefox, na minha opinião, é o Fast Close Tabs: você acha irritante ter que clicar no X à direita de uma aba para fechá-la? Com esta extensão, você pode fechá-la clicando no X da própria janela do Firefox!

Finalizando, um site que acho muito interessante é o Firefox Facts, que traz muitas dicas sobre o Firefox, principalmente sugestões de novas extensões e temas.

9 Responses to “Extensões do Firefox recomendadas para desenvolvedores web”


  1. 1 Roger Leite janeiro 6, 2009 às 9:08 am

    Parabéns pelo post! Logo quando vi o titulo no Reader eu pensei: “Lá vem mais do mesmo … e talz”, me surpreendi quando comecei a ler. Muito útil mesmo.

    Valeu!

  2. 2 Guilherme Garnier janeiro 6, 2009 às 5:42 pm

    Obrigado Roger.

    Realmente eu demorei para escrever esse post, pois comecei achando que ficaria muito repetitivo. Mas depois percebi que há extensões muito boas e que são pouco conhecidas.

  3. 3 InFog janeiro 8, 2009 às 4:32 pm

    Parabéns pelo texto, ficou muito bom!

    Mal posso esperara para testar algumas destas extensões =)

    InFog

  4. 4 Roger de Almeida janeiro 8, 2009 às 8:07 pm

    Essa lista é muito boa. A começar pelo FireBug. É realmente muito bom e não consigo mais desenvolver sistemas pra web sem ele. Principalmente quando o assunto é ajax.

    Como quebra o galho aquelas informações de envio retorno que aparecem na opção console. Além disso, quando mudamos o html dinamicamente, ele tem a capacidade de mostrar em tempo real.

    O outro item muito relevante, o a estatística do tempo que leva para os scripts serem levados até o cliente, inclusive as figuras que fazem parte de uma página.

    E os erros de javascript??? É ótimo!!! Já “corrigi” página dos outros em tempo real para que eu, usando o Firefox no linux pudesse acessar o conteúdo.

    Através do Firebug, é possível provar que muitas páginas que não são acessível pelo firefox, é pura má vontade ou falta de capacidade do desenvolvedor (os que copiam e colam código dos outros sem saber os efitos colaterais).

    Via o pessoal do Firebug!!!!

  5. 5 Rafael Almeida janeiro 11, 2009 às 5:04 pm

    Eu uso o FireBug e o Web Developer.


  1. 1 Extensões do Firefox recomendadas para desenvolvedores web Trackback em janeiro 8, 2009 às 4:00 pm
  2. 2 FUNCOES FIRE FOX | CURIOSIDADES LINUX Trackback em janeiro 10, 2009 às 7:32 am
  3. 3 Usando o firefox para desenvolver páginas web | MINI Dicas Trackback em janeiro 10, 2009 às 4:56 pm
  4. 4 Gerenciamento de perfis no Firefox « Guilherme Garnier Trackback em fevereiro 5, 2009 às 6:46 am

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




@guilhermgarnier

Erro: o Twitter não respondeu. Por favor, aguarde alguns minutos e atualize esta página.

Estatísticas

  • 58,044 hits
Linux Counter

%d blogueiros gostam disto: