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!
Deixar um Comentário