Recentemente, lançamos uma postagem sobre as 12 extensões do Google Chrome para desenvolvedores e designers e algumas dessas extensões estão disponíveis no Firefox , eu não repetiria nenhum aqui.
Da mesma forma, algumas das extensões listadas abaixo estão disponíveis no Chrome portanto, considere esses aplicativos como bônus para os respectivos navegadores.
1. Validador de HTML
HTML Validator executa seu código para garantir que ele siga a convenção padrão HTML. Ele exibe o número de erros que vê no ícone da barra de ferramentas.
HTML Validator Firefox Addon
2. Octotree
Como desenvolvedor, corro várias páginas de código no GitHub de vez em quando quando pesquiso para ver como outros desenvolvedores resolveram certos problemas . Se você é como eu, achará Octotree útil.
Octotree exibe o código do GitHub em um formato de árvore. Dessa forma, você pode navegar pelas linhas de código sem baixar os arquivos de origem.
Octotree mostra o código do GitHub em formato de árvore
3. HTTPS em todos os lugares
HTTPS Everywhere criptografa os dados que você troca com todas as principais páginas da web, mesmo que não usem HTTPS.
Então, se você for direcionado para páginas que não usam https, pode ter certeza de que sua comunicação online é segura.
4. Teste de desempenho da página
Page Performance Test fornece estatísticas sobre suas páginas da web medindo sua velocidade e desempenho de carregamento. Você pode salvar os resultados do gráfico para compará-lo com testes subsequentes.
Teste de desempenho da página
5. Usersnap
Usersnap permite que você faça capturas de tela de sites e faça anotações adicionando desenhos de marcação e comentários. Ele também vem com uma régua de pixels e pode se integrar diretamente com várias ferramentas de gerenciamento de projetos, incluindo Slac, Trello e JIRA.
Esta lista não estará completa sem o Usersnap, pois permite um processo de feedback eficaz. É um serviço pago, porém, com uma avaliação gratuita de 14 dias.
Usersnap
6. Desativar JavaScript
Desativar JavaScript, como o nome sugere, permite desativar o JavaScript em sites ou apenas em guias específicas. Você pode personalizá-lo para ter um estado JS padrão de ativado/desativado e um comportamento de desativação padrão por domínio/guia, etc.
Desativar JavaScript
7. Lista de verificação do desenvolvedor da Web
A extensão Web Developer Checklist fornece uma visão geral de como seu site pode ser usado de acordo com as melhores práticas de design e desenvolvimento.
Clicar no ícone irá informá-lo sobre o SEO do seu site, URLs amigáveis, favicon, etc. com marcas de seleção ao lado deles para indicar uma passagem.
Lista de verificação do desenvolvedor da Web
8. Ferramentas do desenvolvedor React
Com o aumento aparentemente interminável da popularidade do React, os desenvolvedores do React nascem quase todos os dias e a equipe do React os cobre.
React Developer Tools dá a você a capacidade de inspecionar uma árvore React junto com seu estado, props, hierarquia, etc. Para ativá-la , inicie o Firefox devtools e mude para a aba React.
Também existe uma versão para Vue desenvolvedores na forma de ferramentas de desenvolvimento Vue.js.
React Developer Tools
9. ColorZilla
ColorZilla é uma excelente ferramenta para desenvolvedores e designers gráficos escolherem cores de diferentes páginas da web.
Ele também contém um conta-gotas, um gerador de gradiente, um navegador de paletas e um histórico de cores.
ColorZilla
10. Evernote Web Clipper
Evernote Web Clipper permite que você faça capturas de tela de páginas da web e as salve automaticamente em seu Evernoteconta a partir da qual você pode fazer anotações e compartilhar com os membros da equipe.
Evernote Web Clipper
11. Gerenciador de cookies
Cookie Manager é uma extensão de segurança que permite visualizar, adicionar, editar, excluir e pesquisar cookies em qualquer domínio.
O que é ainda mais legal sobre o Cookie Manager é que você pode exportar e importar cookies entre domínios.
Gerenciador de cookies
12. Editor ao vivo para CSS e LESS
Live Editor para CSS e LESS permite que você escreva código CSS/LESS diretamente em seu navegador. Seu código entra em vigor imediatamente e será salvo no nível do site no armazenamento local do seu navegador.
Seu editor in-page apresenta preenchimento automático, embelezamento, linter, etc. Você deve conferir.
Editor ao vivo para CSS
Você gosta de alguma das extensões listadas ou tem uma lista que podemos usar? A seção de comentários está abaixo.