24Aug
Quando configurado corretamente, o Firefox pode se tornar a ferramenta de desenvolvimento web final, dando-lhe acesso direto à página em que você está trabalhando, para que você possa modelar sua página em tempo real, depurar o javascript ou mesmo editar o html.
Criar Perfil Separado para Desenvolvimento 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 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 sobre como fazer isso.
firefox.exe -P WebDev - não-remoto
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 na última ferramenta de desenvolvimento web.
Must-Have Web Dev Extensões
Estas são todas as extensões que uso regularmente para desenvolvimento web.
Firebug
Firebug é a extensão mais poderosa para depuração de javascript, visualização de CSS e html. Você pode fazer alterações dinâmicas no código e CSS e usá-lo para depurar seu código Ajax.É verdadeiramente a melhor extensão por aí.
Web Developer Extension
Uma das melhores extensões para x anos em execução. Este é um must-have para qualquer desenvolvedor, mas você já ouviu falar sobre isso.
Aardvark Extension
Esta extensão é uma extensão muito leve que irá facilmente mostrar-lhe os elementos na página e a sua classe / id atribuída.É mais simples de usar do que a extensão do desenvolvedor web naqueles momentos em que você só precisa da informação rápida para um elemento. Você também pode usá-lo para remover elementos da página.
Colorzilla
Escolha cores facilmente. Não há mais dor de encontrar cores embutidas em algum lugar em uma folha de estilo.
Ver fonte com
Você pode configurar múltiplos perfis de fonte de exibição para abrir a fonte em diferentes aplicativos.
Validator HTML
Esta extensão permite validar facilmente a sua página HTML e instala-se no painel View Source.
Greasemonkey
Não é exatamente uma extensão de desenvolvedor web, mas a Greasemonkey é incrível, não menos importante para a capacidade de automatizar ações comumente executadas, o que é uma ótima economia de tempo para desenvolvedores web.
Medida
Mede 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.
IE View / IE Tab / OperaView / FirefoxView / Safari Ver / IE View Lite
Estas extensões( escolha) permitem que você visualize facilmente a página atual em diferentes navegadores. O IE Tab até permitirá que você execute o IE dentro de uma guia, se você estivesse tão inclinado.
Limpar o botão de cache
Limpa o cache. Especialmente útil para verificar novas alterações CSS.
Reinicie o Firefox
A extensão do Restart 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 tem algumas características essencialmente úteis para desenvolvedores web: guia Duplicado e URL da guia de cópia.
YSlow
A extensão YSlow é uma nova extensão do Yahoo que analisará sua página e informará onde você cometeu erros. Até lhe dará uma nota no desempenho do seu site. Você notará o pequeno indicador 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 fofo para você com base no famoso texto do Lorem Ipsum, que é muito útil para colocar conteúdo falso no seu site.
Screengrab!
A extensão Screengrab permitirá que você capture screenshots de páginas, mas pode fazer algo que uma ferramenta de captura de tela normal não pode - pode tirar uma imagem de toda a página, não apenas a parte visível.
Existem toneladas de outras extensões que você pode usar, mas estas são as melhores do melhor de tudo que eu vi. Se você tiver outra extensão que use regularmente, deixe uma menção nos comentários.
Neste ponto, você já transformou o Firefox na ferramenta de desenvolvimento web final. Aproveite o tempo para aprender a usar o Firebug especialmente.