15 Best Browser Extensions for Developers (2019)

A maior mudança para o 2018 foi a grande reformulação do FireFox e, com ele, a maneira como os complementos funcionam nesse navegador. Como resultado, muitos complementos populares não são mais mantidos ou se tornaram indisponíveis.

A maioria dos add-ons para o Firefox também está disponível como extensões para o Google Chrome. Neste artigo, tentaremos dar preferência a complementos / extensões entre navegadores, o que, nesse contexto, significa que eles funcionarão no Firefox, no Chrome e no Chromium. Também daremos preferência a extensões gratuitas que não são conhecidas para passar suas informações para terceiros e não são suportadas pela receita de anúncios. Vamos nos concentrar mais em extensões que não restringem a uma tecnologia de desenvolvimento específica.

Poucos desenvolvedores veriam qualquer vantagem em usar o Microsoft Edge como navegador de desenvolvimento, mas é bom para testes pós-desenvolvimento. Espera-se que um pouco mais de 4 em todos os visitantes do site 100 o usem, embora seja esperado que esse número aumente um pouco à medida que mais usuários abandonarem o Internet Explorer.

Embora haja muito mais usuários do Chrome do que usuários do Firefox, os que estão na área de TI tendem a preferir o Firefox, e é por isso que há mais e melhores extensões voltadas para desenvolvedores no Firefox.

Agora vamos dar uma olhada nas melhores extensões de navegador para desenvolvedores e por que você pode adicioná-las ao seu navegador.

1. Construído com

Quando você se encontra em um site muito bem feito e quer saber como eles fizeram isso, essa extensão economizará muito tempo e esforço para pesquisar o código-fonte. Links para download: Cromo / cromo, Firefox

2. Machado

Esta é uma ferramenta de auditoria de acessibilidade. É sempre melhor tentar tornar suas páginas o mais acessíveis possível, e o ax ajuda a evitar a exclusão acidental de um segmento de usuários do seu site. Links para download: Cromo / cromo, Firefox

3. ColorZilla

Um antigo, mas ainda assim, esta extensão permite que você experimente cores diretamente de uma página, recupere códigos de cores, gere gradientes e muito mais. Links para download: Cromo / cromo, Firefox

4. WebDeveloper

Adiciona alguns extras úteis ao seu navegador para controle de CSS, formulários, imagens e informações. Uma das extensões mais populares já feitas. Links para download: Cromo / cromo, Firefox

5. Woo Rank

Analise qualquer página da web para dados de SEO. Fornece um relatório poderoso mostrando todos os elementos internos do SEO, incluindo uma pontuação geral de SEO, sugestões de melhoria, nuvem de palavras-chave e muito mais. Links para download: Cromo / cromo, Firefox

6. Tab2QR

Gere um código QR da página em que você está e você pode visitar a página com seu telefone apenas digitalizando o código QR. Bom para testar sites responsivos, mesmo que você não os tenha criado. Links para download: Cromo / cromo, Firefox

7. Criador de solicitações HTTP

Isso pode ser muito útil para testar respostas de formulários PHP onde você realmente não deseja realmente enviar o formulário (o que pode desencadear processamento adicional que você não precisa testar). Com esta ferramenta você pode forjar solicitações HTTP sem esforço. Observe que, embora as extensões do Chrome e do Firefox tenham o mesmo nome e façam as mesmas coisas, elas são feitas por desenvolvedores diferentes e não são exatamente as mesmas. Links para download: Cromo / cromo, Firefox

8. Teste de desempenho de página

Obtenha rapidamente um relatório sobre o desempenho de sua página em diferentes etapas da jornada até o navegador. É como uma versão mais avançada do tracert. Este está disponível apenas no Firefox por enquanto. Existem extensões semelhantes para o Chrome e o Chromium, mas não são tão ricas em funcionalidades como esta. Links para download: Firefox

9. Ferramenta de contagem de palavras

Este, na verdade, pode fazer mais do que o nome sugere, já que ele também informará quantos caracteres e quantas sentenças estão dentro de um bloco de texto selecionado (ou a página inteira). Links para download: Cromo / cromo, Firefox

10. Lista de verificação para desenvolvedores da Web

Certifique-se de seguir as melhores diretrizes de prática de desenvolvimento da Web com essa ferramenta que aparecerá onde seus padrões podem ter caído. Links para download: Cromo / cromo, Firefox

11. Editor de Mapas de Imagem

Um de um trio de excelentes extensões do desenvolvedor alemão Heinz-Jürgen Boms, este faz exatamente o que o nome diz que faz. Você pode gerar um mapa de imagem diretamente no navegador apenas rastreando as áreas de uma imagem que deseja mapear. Links para download: Firefox

12. Editor de quadros avançado

Outra extensão da Heinz-Jürgen Boms, esta é realmente uma ferramenta de estilo CSS, onde você pode construir um quadro diretamente no navegador, especificando seus atributos. Vale a pena conferir o documentação antes de começar a usá-lo. Links para download: Firefox

13. Bootstrap Responsive Helper

Esta é uma pequena extensão muito simples que ajuda você a ver rapidamente se seus pontos de interrupção estão funcionando corretamente e qual o nível de bootstrap do modo atual. Claro que você só precisará dessa extensão se realmente trabalhar no Bootstrap. A versão do Chrome é desenvolvida por Jonathan Defraiteur, e a versão do Firefox é desenvolvida por Kevin Bon. Links para download: Cromo / cromo, Firefox

14. Experimente você mesmo HTML5 Editor

Se você preferir manter as coisas simples e apenas realizar todo o seu trabalho em um só lugar, essa extensão é para você. Rico em recursos, esse editor sensível ao contexto funciona diretamente no navegador e suporta HTML, CSS e JavaScript. Está longe de ser perfeito, mas para uma edição rápida e suja sem o inconveniente de abrir um aplicativo separado, ele faz o trabalho. Links para download: Firefox

15. Óculos de Raio-X

Tecnicamente, este não é uma extensão, é na verdade um bookmarklet. Mas funciona tão bem que não poderíamos deixá-lo fora da lista. Mesmo sendo feito pela Mozilla, funciona igualmente bem no Chrome, porque ambos os navegadores são totalmente compatíveis com os padrões. Para usá-lo, você precisará tornar sua barra de favoritos visível. Em seguida, visite a página de download, que você pode acessar pelos links abaixo, e arraste o botão X-Ray Goggles para a barra de favoritos. Em seguida, basta visitar qualquer site, acionar seu marcador do X-Ray Goggles, selecionar um elemento na página e editar o código para ele. Links para download: Cromo / cromo, Firefox

imagem de cabeçalho cortesia de

Bogdan Rancea

Bogdan é um membro fundador da Inspired Mag, acumulando quase 6 anos de experiência neste período. Em seu tempo livre, ele gosta de estudar música clássica e explorar artes visuais. Ele é muito obcecado com fixies também. Ele é dono do 5 já.