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 na web, vamos dar uma olhada nas extensões que podemos usar para transformar o Firefox na ferramenta definitiva de desenvolvimento da 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 item obrigatório 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ê precisa apenas 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 origem de visualização para abrir a fonte em diferentes aplicativos.
Validador de HTML
Esta extensão permite que você valide facilmente o HTML da sua página e instale no painel Exibir código-fonte.
Greasemonkey
Não é exatamente uma extensão de desenvolvedor da Web, mas o Greasemonkey é impressionante, não menos importante para a capacidade de automatizar ações comumente executadas, o que economiza muito tempo para os 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 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 grande 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. Isso 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 do 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 comum não consegue - pode levar uma imagem de toda a página, não apenas da parte visível.
A essa altura, você transformou o Firefox na ferramenta de desenvolvimento da Web mais avançada. Aproveite o tempo para aprender a usar o Firebug especialmente.
