Quando configurado corretamente, o Firefox pode se tornar a ferramenta de desenvolvimento web definitiva, dando a você acesso direto à página em que está trabalhando para que possa estilizar sua página em tempo real, depurar javascript ou até mesmo editar o html.
Criar Perfil Separado para Desenvolvimento Web
Instalar todas essas ferramentas de desenvolvimento tornará o Firefox um navegador muito pesado, portanto, devemos primeiro criar um novo perfil para o Firefox.
Você pode iniciar um perfil separado ao mesmo tempo que seu perfil normal, criando um novo atalho com esses argumentos, substituindo WebDev pelo nome do seu perfil. Também há um 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 tornar o Firefox a ferramenta de desenvolvimento web definitiva.
Web Dev Extensions indispensáveis
Todas essas são extensões que uso regularmente para desenvolvimento web.
Firebug é a extensão mais poderosa para depurar javascript, visualizar CSS e html. Você pode fazer alterações dinâmicas no código e CSS e usá-lo para depurar seu código Ajax. É realmente a melhor extensão que existe.
Extensão para desenvolvedores da web
Uma das melhores extensões por x anos consecutivos. Isso é obrigatório para qualquer desenvolvedor, mas você já ouviu falar dele.
Esta 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 de desenvolvedor da web para aqueles momentos em que você só precisa de informações rápidas para um elemento. Você também pode usá-lo para remover elementos da página.
Selecione cores facilmente. Não há mais dor de encontrar cores incorporadas em algum lugar em uma folha de estilo.
Você pode configurar vários perfis de fonte de exibição para abrir a fonte em diferentes aplicativos.
Esta extensão permite validar facilmente o HTML da sua página e instalá-la no painel Exibir código-fonte.
Não é exatamente uma extensão de desenvolvedor web, mas Greasemonkey é incrível, não apenas pela capacidade de automatizar ações comumente executadas, o que economiza muito tempo para desenvolvedores web.
Meça facilmente uma distância na tela com esta extensão. Depois de medir uma área, você pode arrastar o retângulo ao redor da tela para usar como uma comparação.
Visualização do IE / Guia do IE / OperaView / FirefoxView / Safari View / IE View Lite
Essas extensões (faça sua escolha) permitem que você visualize facilmente a página atual em diferentes navegadores. O IE Tab até permite que você execute o IE dentro de uma guia, se você quiser.
Limpa o cache. Especialmente útil para verificar novas alterações de CSS.
A extensão Reiniciar Firefox é muito útil para fechar e reiniciar o Firefox com todas as guias e sessões intactas.
A extensão Tab Mix Plus é uma grande extensão em geral, mas tem alguns recursos essencialmente úteis para desenvolvedores da web: Duplicar guia e Copiar URL da guia.
A extensão YSlow é uma nova extensão do Yahoo que irá analisar sua página e dizer onde você está cometendo erros. Até lhe dará uma nota no 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.
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 definir conteúdo falso em seu site.
A extensão Screengrab permitirá que você faça capturas de tela das páginas, mas pode fazer algo que uma ferramenta normal de captura de tela não pode - ela pode tirar uma imagem de toda a página, não apenas da parte visível.
Existem várias outras extensões que você pode usar, mas essas são as melhores das melhores de tudo que eu já vi. Se você tiver outra extensão que usa regularmente, deixe uma menção nos comentários.
Neste ponto, você transformou o Firefox na ferramenta de desenvolvimento web definitiva. Reserve um tempo para aprender como usar o Firebug especialmente.
