22 Extensões do Chrome e Edge focadas em produtividade para Desenvolvedores, Techs e Designers

Extensões do Chrome e Edge

O Google Chrome é o navegador mais utilizado por desenvolvedores web. A razão para isso é o acesso a um grande número de extensões e ferramentas do navegador, o que facilita muito o trabalho diário. Além disso, as diversas extensões do Chrome para Desenvolvedores disponíveis tornam o trabalho mais eficiente e otimizado, pois os profissionais podem acessar rapidamente os recursos de que precisam.

Existem muitas extensões do Chrome úteis para desenvolvedores disponíveis na Chrome Web Store. Abaixo listamos as 22 melhores extensões para Desenvolvedores, Analistas, Técnicos e Designers.

1. Wappalyzer

Wappalyzer é uma das melhores extensões do Chrome para desenvolvedores, ela permite aos desenvolvedores ver quais tecnologias estão sendo usadas em um site. Quando você visita um site, a extensão examina o código-fonte e identifica as tecnologias que estão sendo utilizadas, como o sistema de gerenciamento de conteúdo (CMS), o framework de front-end e o servidor web. Isso pode ser útil se você estiver tentando descobrir como um site foi construído ou se estiver procurando por exemplos de implementação de uma determinada tecnologia. Além disso, a extensão fornece uma visão geral das tecnologias utilizadas em um site, o que pode ser útil para avaliar a complexidade de um projeto ou para identificar possíveis vulnerabilidades de segurança.

2. JSON Formatter

JSON Formatter é uma das extensões do Chrome mais utilizadas por quem trabalha com API, ela permite a visualização e formatação de arquivos JSON. JSON (JavaScript Object Notation) é um formato de dados utilizado para troca de informações na web. É comumente usado para transmitir dados entre um servidor e um aplicativo web ou para armazenar informações estruturadas de maneira que possam ser lidas por máquinas.

A extensão JSON Formatter fornece uma maneira fácil de visualizar e formatar arquivos JSON. Quando você abre um arquivo JSON, a extensão o formata de maneira legível, exibindo as informações em uma estrutura de árvore. Isso pode ser útil se você estiver trabalhando com dados JSON e precisar examinar o conteúdo de um arquivo de maneira mais clara.

3. Monaco Markdown Editor For GitHub

Monaco Markdown Editor For GitHub é uma extensão do Chrome que adiciona um editor de markdown ao GitHub. Markdown é um formato de texto que permite a criação de documentos formatados usando simples marcações de texto em vez de código HTML. É amplamente utilizado em projetos de código aberto e plataformas de colaboração, como o GitHub, para criar documentos de texto como arquivos de leia-me, relatórios de erro e comentários de código.

A extensão Monaco Markdown Editor For GitHub adiciona um editor de markdown ao GitHub, permitindo que você crie e edite documentos markdown diretamente no site. O editor é baseado no Monaco Editor, um editor de código open source desenvolvido pelo Microsoft Visual Studio Code. Ele oferece uma variedade de recursos, como destaques de sintaxe, pré-visualização em tempo real e suporte para múltiplas linguagens de programação. Isso pode ser útil se você precisar escrever documentos markdown no GitHub e desejar um editor mais avançado do que o editor padrão do site.

4. ColorZilla

ColorZilla é uma das extensões do Chrome mais essenciais para Designers, que fornece uma variedade de ferramentas para trabalhar com cores na web. A extensão adiciona uma paleta de cores à interface do navegador, permitindo que você veja as cores de um site e as copie para a área de transferência. Além disso, ela oferece uma ferramenta de pincel de cor, que permite identificar a cor de qualquer ponto da tela, bem como uma ferramenta de gradiente, que permite criar gradientes personalizados.

ColorZilla pode ser útil para desenvolvedores que precisam trabalhar com cores em projetos da web. Por exemplo, você pode usar a extensão para copiar a cor de um elemento de um site e colá-la em seu próprio código HTML ou CSS. Além disso, a extensão também pode ser útil para designers gráficos que precisam selecionar cores para usar em projetos.

5. Email Hunter

Email Hunter é uma extensão do Chrome que permite aos usuários encontrar endereços de e-mail em sites da web. Quando você visita um site, a extensão examina o código-fonte da página e procura por endereços de e-mail. Ela então exibe uma lista de endereços de e-mail encontrados e permite que você os copie para a área de transferência.

Email Hunter pode ser útil se você estiver procurando por endereços de e-mail de contato de uma empresa ou indivíduo. Por exemplo, se você estiver tentando entrar em contato com um profissional ou empresa para uma oportunidade de trabalho ou para enviar uma proposta de negócios, pode ser útil ter um endereço de e-mail para enviar sua mensagem. No entanto, é importante lembrar que o uso de endereços de e-mail deve ser feito de maneira responsável e respeitosa e que a privacidade das pessoas deve ser levada em consideração.

6. SVG Export

SVG Export é uma extensão do Chrome que permite aos usuários salvar imagens em formato SVG (Scalable Vector Graphics) a partir de sites da web. SVG é um formato de imagem vetorial que é amplamente utilizado na web devido à sua alta qualidade e escalabilidade. Ele é especialmente útil para imagens que precisam ser redimensionadas sem perda de qualidade, como ícones e gráficos.

A extensão SVG Export adiciona um botão à interface do navegador que permite salvar imagens em formato SVG. Quando você clica no botão, a extensão examina a página atual e exibe uma lista de imagens que podem ser salvas em formato SVG. Você pode selecionar as imagens desejadas e salvar o arquivo SVG em seu computador. Isso pode ser útil se você estiver trabalhando com imagens vetoriais e precisar salvar uma imagem em formato SVG para uso em um projeto da web.

7. Save Image As PNG

Save Image As PNG é uma extensão do Chrome que permite aos usuários salvar imagens em formato PNG (Portable Network Graphics) a partir de sites da web. PNG é um formato de imagem que é amplamente utilizado na web devido à sua alta qualidade e compressão sem perda de qualidade. Ele é especialmente útil para imagens com áreas transparentes, como ícones e gráficos.

A extensão adiciona a opção “Salvar imagem como PNG” ao menu de contexto de imagens. Converte uma imagem em PNG antes de exibir o diálogo Salvar como.

O WebP é um novo formato de imagem desenvolvido pelo Google. Essas imagens são pequenas, mas seu formato ainda não é amplamente reconhecido. Ao converter a imagem em PNG, você poderá usá-la em programas de edição de imagem e/ou fazer upload dela para sites de hospedagem de imagens online.

8. User-Agent Switcher for Chrome

User-Agent Switcher for Chrome é uma extensão do Chrome que permite alterar o user agent de um navegador. O user agent é uma string de dados enviada pelo navegador ao servidor a cada vez que uma página é solicitada. Ele informa ao servidor qual é o navegador sendo usado, qual é a plataforma (por exemplo, Windows ou macOS) e qual é a versão do navegador.

A extensão User-Agent Switcher for Chrome adiciona uma opção à interface do navegador que permite alterar o user agent do navegador. Isso pode ser útil em várias situações, como ao testar como um site é exibido em diferentes navegadores ou plataformas, ou ao contornar restrições de acesso baseadas no user agent. No entanto, é importante lembrar que alterar o user agent pode afetar o comportamento de um site e pode levar a resultados inesperados.

9. SelectorGadget

SelectorGadget é uma extensão do Chrome que facilita a seleção de elementos em uma página da web. É especialmente útil para desenvolvedores que trabalham com CSS (Cascading Style Sheets) e precisam identificar elementos específicos em uma página para alterar sua aparência ou comportamento.

Ao instalar a extensão, um ícone é adicionado à barra de ferramentas do navegador. Quando você clica no ícone, o SelectorGadget é ativado e exibe um marcador vermelho na página. Você pode então clicar em elementos na página para adicioná-los à seleção. A extensão irá exibir o código CSS correspondente aos elementos selecionados, o que pode ser útil para identificar o melhor seletor para usar em um estilo CSS. Além disso, a extensão também oferece opções para ajustar a seleção e remover elementos indesejados da seleção.

10. Magical – Text Expander & Autofill

Magical – Text Expander & Autofill é uma extensão do Chrome que permite aos usuários criar atalhos para textos e informações comuns que são digitados com frequência. Por exemplo, você pode criar um atalho para seu endereço de e-mail ou para um parágrafo comum de texto que você usa em respostas de e-mail. Quando você digita o atalho, a extensão o substitui pelo texto ou informação correspondente.

A extensão também inclui uma opção de autocompletar, que sugere palavras ou frases enquanto você digita. Isso pode ser útil para economizar tempo e reduzir erros de digitação. Além disso, a extensão permite que você crie grupos de atalhos e os organize em categorias, o que pode ser útil se você tiver muitos atalhos diferentes.

11. Web Vitals

Web Vitals é uma extensão do Chrome que fornece uma visão geral das métricas chave de experiência do usuário de um site. Essas métricas incluem fatores como velocidade de carregamento, interação e estabilidade do layout. Elas são consideradas métricas vitais porque têm um impacto significativo na experiência do usuário e podem afetar o desempenho de um site em pesquisas e em outras métricas de desempenho.

Ao instalar a extensão, você pode ver uma análise das métricas vitais de um site quando você visita o site. A extensão exibe uma pontuação de desempenho para cada métrica e fornece detalhes sobre o que está afetando o desempenho. Isso pode ser útil para identificar problemas de desempenho em um site e tomar medidas para corrigi-los. Além disso, a extensão também fornece recomendações sobre como melhorar o desempenho de um site.

12. ModHeader – Modify HTTP headers

ModHeader – Modify HTTP headers é uma extensão do Chrome que permite aos usuários alterar os cabeçalhos HTTP de uma solicitação de página da web. Os cabeçalhos HTTP são dados enviados pelo navegador ao servidor junto com uma solicitação de página. Eles podem conter informações como o tipo de navegador sendo usado, a linguagem preferida pelo usuário e outras informações.

A extensão ModHeader – Modify HTTP headers adiciona uma opção à interface do navegador que permite alterar os cabeçalhos HTTP de uma solicitação de página. Isso pode ser útil em várias situações, como testar como um site é exibido em diferentes navegadores ou plataformas ou contornar restrições de acesso baseadas em cabeçalhos HTTP. No entanto, é importante lembrar que alterar os cabeçalhos HTTP pode afetar o comportamento de um site e pode levar a resultados inesperados.

13. Tampermonkey

Tampermonkey é uma das mais conhecidas extensões do Chrome, ela permite aos usuários instalar e gerenciar scripts de usuário em sites da web. Os scripts de usuário são pequenos trechos de código que podem ser executados no navegador para modificar o comportamento ou a aparência de um site. Eles são amplamente utilizados por desenvolvedores para adicionar novas funcionalidades a sites, corrigir problemas ou personalizar a aparência de um site.

A extensão Tampermonkey permite que você instale e gerencie scripts de usuário no Chrome. Ela adiciona uma opção à interface do navegador que permite instalar e ativar scripts de usuário para um site específico. Isso pode ser útil se você quiser adicionar novas funcionalidades a um site ou modificar o comportamento de um site de acordo com suas preferências. No entanto, é importante lembrar que os scripts de usuário podem afetar o comportamento de um site e podem levar a resultados inesperados. É importante instalar scripts de fontes confiáveis e verificar se eles estão atualizados e mantidos.

14. EditThisCookie

EditThisCookie é uma extensão do Chrome que permite aos usuários gerenciar cookies em um site da web. Os cookies são pequenos arquivos de dados armazenados no navegador que são enviados pelo servidor a cada vez que uma página é solicitada. Eles podem conter informações como preferências de usuário, sessões de login e outros dados que são usados para personalizar a experiência de um usuário em um site.

A extensão EditThisCookie adiciona uma opção à interface do navegador que permite ver, adicionar, modificar ou excluir cookies de um site. Isso pode ser útil em várias situações, como ao testar o comportamento de um site com diferentes configurações de cookie ou ao limpar os cookies de um site. No entanto, é importante lembrar que alterar os cookies pode afetar o comportamento de um site e pode levar a resultados inesperados. É importante usar a extensão com cuidado e entender como os cookies são usados em um site antes de alterá-los.

15. WhatFont

WhatFont é uma das extensões do Chrome excelentes que permite aos usuários verificar qual fonte é usada em um texto específico em um site da web. Ela é especialmente útil para desenvolvedores e designers que trabalham com tipografia e precisam identificar as fontes usadas em um site.

Ao instalar a extensão, um ícone é adicionado à barra de ferramentas do navegador. Quando você clica no ícone, o cursor muda para uma lupa. Você pode então clicar em qualquer texto na página para ver qual fonte é usada. A extensão exibe o nome da fonte, o estilo (por exemplo, negrito ou itálico) e o tamanho da fonte. Isso pode ser útil se você quiser usar a mesma fonte em um projeto ou se você quiser verificar se a fonte usada em um site está de acordo com as especificações de design.

16. Open Frame

Open Frame é uma extensão do Chrome que permite aos usuários abrir o conteúdo de um quadro em uma nova guia do navegador. Os quadros são elementos HTML que permitem dividir a página em áreas independentes e exibir conteúdo diferente em cada área. Eles são amplamente usados em sites da web para exibir conteúdo de outros sites ou para dividir a página em áreas de navegação e conteúdo.

A extensão Open Frame adiciona um botão à interface do navegador que permite abrir o conteúdo de um quadro em uma nova guia. Isso pode ser útil se você quiser acessar o conteúdo de um quadro sem sair da página atual ou se você quiser ver o conteúdo de um quadro sem outros elementos da página. No entanto, é importante lembrar que a extensão só funcionará se o site permitir o acesso ao conteúdo de um quadro. Alguns sites podem bloquear o acesso aos quadros para evitar o uso indevido do conteúdo.

17. Resolution Test

Resolution Test é uma extensão do Chrome que permite aos usuários testar como um site é exibido em diferentes resoluções de tela. A resolução de tela é o número de pixels que um monitor ou dispositivo pode exibir em largura e altura. Sites da web podem ser projetados para se adaptar a diferentes resoluções de tela, mas às vezes podem ter problemas de exibição em resoluções específicas.

Ao instalar a extensão, um ícone é adicionado à barra de ferramentas do navegador. Quando você clica no ícone, a extensão exibe uma lista de resoluções de tela comuns. Você pode selecionar uma resolução e clicar em “Aplicar” para ver como o site é exibido naquela resolução. Isso pode ser útil se você quiser testar como um site é exibido em diferentes resoluções ou se você quiser ver como o site é exibido em uma resolução específica. Além disso, a extensão também permite que você digite uma resolução personalizada para testar.

18. Shortkeys (Custom Keyboard Shortcuts)

Shortkeys (Custom Keyboard Shortcuts) é uma extensão do Chrome que permite aos usuários criar atalhos de teclado personalizados para ações comuns no navegador. Os atalhos de teclado são combinações de teclas que podem ser pressionadas para realizar uma ação rapidamente. Eles são amplamente usados para economizar tempo e tornar a navegação mais eficiente.

A extensão Shortkeys (Custom Keyboard Shortcuts) adiciona uma opção à interface do navegador que permite criar atalhos de teclado personalizados. Você pode definir uma combinação de teclas e associá-la a uma ação, como abrir uma guia, atualizar a página ou ir para o início do site. Isso pode ser útil se você quiser criar atalhos para ações que não são incluídas por padrão no navegador ou se você quiser personalizar os atalhos existentes. Além disso, a extensão permite que você importe e exporte conjuntos de atalhos, o que pode ser útil se você quiser usar os mesmos atalhos em vários computadores ou navegadores.

19. Lighthouse

Lighthouse é uma extensão do Chrome que fornece uma análise de desempenho, acessibilidade, SEO e outras métricas importantes para sites da web. É amplamente utilizado por desenvolvedores e designers para avaliar o desempenho e a qualidade de um site e identificar problemas que precisam ser corrigidos.

Ao instalar a extensão, um ícone é adicionado à barra de ferramentas do navegador. Quando você clica no ícone, a extensão inicia uma análise do site atual e exibe os resultados em uma página de relatório. O relatório inclui informações sobre o tempo de carregamento, a optimização de imagens, a acessibilidade e outras métricas. Além disso, a extensão fornece recomendações sobre como melhorar o desempenho e a qualidade do site. Isso pode ser útil se você quiser otimizar o desempenho de um site ou se você quiser garantir que o site atenda aos padrões de qualidade recomendados.

20. Pesticide for Chrome

Pesticide for Chrome é uma extensão do Chrome que adiciona uma opção à interface do navegador que permite exibir as caixas de layout de um site da web. As caixas de layout são elementos visuais que mostram como os elementos de um site são organizados em relação uns aos outros. Eles são amplamente usados por desenvolvedores e designers para entender como um site é estruturado e para identificar problemas de layout.

Ao instalar a extensão, um ícone é adicionado à barra de ferramentas do navegador. Quando você clica no ícone, a extensão adiciona uma camada de caixas de layout sobre o site atual. As caixas de layout são exibidas em volta dos elementos da página e são coloridas de acordo com o tipo de elemento (por exemplo, elementos de cabeçalho são exibidos em azul). Isso pode ser útil se você quiser ver como os elementos de um site são organizados ou se você quiser identificar problemas de layout. Além disso, a extensão permite que você altere as opções de exibição das caixas de layout, como a cor e a espessura das linhas

21. CSS Viewer for Google Chrome™

CSS Viewer for Google Chrome™ é uma extensão do Chrome que permite aos usuários ver informações sobre os estilos CSS (Cascading Style Sheets) aplicados a um elemento da página da web. Os estilos CSS são usados para definir a aparência de elementos HTML, como fontes, cores, margens e outros aspectos visuais. Eles são amplamente usados por desenvolvedores e designers para controlar a aparência de um site.

Ao instalar a extensão, um ícone é adicionado à barra de ferramentas do navegador. Quando você clica no ícone, o cursor muda para uma lupa. Você pode então clicar em qualquer elemento da página para ver as informações de estilo CSS aplicadas a ele. A extensão exibe o nome do estilo, o valor e a fonte (por exemplo, o arquivo CSS ou a regra inline). Isso pode ser útil se você quiser ver como um elemento foi estilizado ou se você quiser verificar se um estilo está sendo aplicado corretamente. Além disso, a extensão permite que você copie as informações de estilo para a área de transferência para uso posterior.

22. Web Developer

A extensão Web Developer para Chrome é uma ferramenta de desenvolvimento de websites para o navegador Google Chrome. Ela adiciona uma série de recursos e opções úteis ao navegador que podem ser usados para testar, depurar e otimizar websites. Alguns dos recursos incluem:

• Verificação de código HTML e CSS
• Ferramentas para testar o responsivo de um site
• Ferramentas de depuração de JavaScript
• Opções para desabilitar o cache do navegador
• Ferramentas para visualizar a estrutura do DOM (Document Object Model) de um site
• Opções para editar o código HTML e CSS em tempo real
• Ativar e desativar recursos de um site

A extensão Web Developer é uma ferramenta valiosa para qualquer pessoa que desenvolva websites, pois oferece uma série de recursos úteis para facilitar o processo de desenvolvimento e depuração de sites.

Compartilhe!

Conhece outras extensões do Chrome que não está listada acima?

Deixe suas sugestões nos comentários!