Crie o Ultimate Firefox Web Development Profile

Quando configurado corretamente, o Firefox pode se tornar a melhor ferramenta de desenvolvimento web, dando acesso direto à página em que você está trabalhando, para que você possa estilizar sua página em tempo real, depurar javascript ou até mesmo editar o html.

Criar um perfil separado para desenvolvimento na Web

Instalar todas essas ferramentas de desenvolvimento fará do Firefox um navegador muito pesado, então devemos primeiro criar um novo perfil para o Firefox.

Você pode iniciar um perfil separado ao mesmo tempo que o seu perfil regular criando um novo atalho com esses argumentos, substituindo o WebDev pelo nome do seu perfil. Há também uma explicação mais detalhada de como fazer isso.

firefox.exe -P WebDev -no-remote

Agora que você configurou o Firefox com um perfil separado apenas para desenvolvimento web, vamos dar uma olhada nas extensões que podemos usar para transformar o Firefox na ferramenta definitiva de desenvolvimento web.

Devem ter extensões Web Dev

Estas são todas as extensões que eu uso regularmente para o desenvolvimento web.

Firebug

O Firebug é a extensão mais poderosa para depurar o javascript, ver CSS e html. Você pode fazer alterações dinâmicas no código e no CSS e usá-lo para depurar seu código Ajax. É realmente a melhor extensão lá fora.

Extensão para desenvolvedores da Web

Uma das melhores extensões para x anos consecutivos. Este é um must-have para qualquer desenvolvedor, mas você já ouviu falar dele.

Extensão de Aardvark

Essa extensão é uma extensão muito leve que mostrará facilmente os elementos na página e sua classe / id atribuída. É mais simples de usar do que a extensão do desenvolvedor da Web para aqueles momentos em que você só precisa das informações rápidas de um elemento. Você também pode usá-lo para remover elementos da página.

Colorzilla

Selecione as cores facilmente. Não há mais dor de encontrar cores incorporadas em algum lugar em uma folha de estilo.

Ver fonte com

Você pode configurar vários perfis de fonte de visualização para abrir a fonte em diferentes aplicativos.

Validador de HTML

Esta extensão permite validar facilmente o HTML da sua página e instala-o no painel Visualizar origem.

Greasemonkey

Não é exatamente uma extensão de desenvolvedor da Web, mas o Greasemonkey é incrível, não menos importante para a capacidade de automatizar ações comumente executadas, o que economiza muito tempo para desenvolvedores da Web..

Meça isto

Meça facilmente uma distância na tela com esta extensão. Depois de medir uma área, você pode arrastar o retângulo pela tela para usar como comparação.

Visualização do IE / IE Tab / OperaView / FirefoxView / Safari View / IE View Lite

Essas extensões (escolha você) permitem visualizar facilmente a página atual em diferentes navegadores. O IE Tab permite até que você rode o IE dentro de uma aba, se você estiver tão inclinado.

Limpar o botão do cache

Limpa o cache. Especialmente útil para verificar novas alterações de CSS.

Reinicie o Firefox

A extensão Restart do Firefox é muito útil para fechar e reiniciar o Firefox com todas as guias e sessões intactas.

Tab Mix Plus

A extensão Tab Mix Plus é uma ótima extensão em geral, mas possui alguns recursos essencialmente úteis para desenvolvedores da web: Guia Duplicada e URL da Guia Copiar.

YSlow

A extensão YSlow é uma nova extensão do Yahoo que analisará sua página e lhe dirá onde você está cometendo erros. Ele vai te dar uma nota sobre o desempenho do seu site. Você notará o pequeno medidor no canto inferior direito ... ele informa o tamanho total da sua página, bem como o tempo de carregamento. Extensão muito útil, mas requer a extensão Firebug.

Dummy Lorem Ipsum

A extensão do gerador Dummy Lipsum irá gerar conteúdo fictício para você com base no famoso texto Lorem Ipsum que é muito útil para criar conteúdo falso em seu site.

Captura de tela!

A extensão Screengrab permite que você faça capturas de tela de páginas, mas pode fazer algo que uma ferramenta de captura de tela normal não pode - pode levar uma imagem de toda a página, não apenas a parte visível.

 

Há toneladas de outras extensões que você pode usar, mas estas são as melhores das melhores que eu já vi. Se você tem outra extensão que você usa regularmente, deixe uma menção nos comentários.

Neste ponto, você transformou o Firefox na ferramenta de desenvolvimento web definitiva. Aproveite o tempo para aprender a usar o Firebug especialmente.