22 Extenses do Chrome focadas em produtividade para Desenvolvedores, Techs e Designers

Extenses do Chrome

O Google Chrome o navegador mais utilizado por desenvolvedores web. A razo para isso o acesso a um grande nmero de extenses e ferramentas do navegador, o que facilita muito o trabalho dirio. Alm disso, as diversas extenses do Chrome para Desenvolvedores disponveis tornam o trabalho mais eficiente e otimizado, pois os profissionais podem acessar rapidamente os recursos de que precisam.

Existem muitas extenses do Chrome teis para desenvolvedores disponveis na Chrome Web Store. Abaixo listamos as 22 melhores extenses para Desenvolvedores, Analistas, Tcnicos e Designers.

1. Wappalyzer

Wappalyzer Guia de TI

Wappalyzer uma das melhores extenses do Chrome para desenvolvedores, ela permite aos desenvolvedores ver quais tecnologias esto sendo usadas em um site. Quando voc visita um site, a extenso examina o cdigo-fonte e identifica as tecnologias que esto sendo utilizadas, como o sistema de gerenciamento de contedo (CMS), o framework de front-end e o servidor web. Isso pode ser til se voc estiver tentando descobrir como um site foi construdo ou se estiver procurando por exemplos de implementao de uma determinada tecnologia. Alm disso, a extenso fornece uma viso geral das tecnologias utilizadas em um site, o que pode ser til para avaliar a complexidade de um projeto ou para identificar possveis vulnerabilidades de segurana.

Download Wappalyzer

2. JSON Formatter

JSON Formatter Guia de TI

JSON Formatter uma das extenses do Chrome mais utilizadas por quem trabalha com API, ela permite a visualizao e formatao de arquivos JSON. JSON(JavaScript Object Notation) um formato de dados utilizado para troca de informaes na web. comumente usado para transmitir dados entre um servidor e um aplicativo web ou para armazenar informaes estruturadas de maneira que possam ser lidas por mquinas.

A extenso JSON Formatter fornece uma maneira fcil de visualizar e formatar arquivos JSON. Quando voc abre um arquivo JSON, a extenso o formata de maneira legvel, exibindo as informaes em uma estrutura de rvore. Isso pode ser til se voc estiver trabalhando com dados JSONe precisar examinar o contedo de um arquivo de maneira mais clara.

Download JSON Formatter

3. Monaco Markdown Editor For GitHub

Monaco Markdown Editor For GitHub Guia de TI

Monaco Markdown Editor For GitHub uma extenso do Chrome que adiciona um editor de markdown ao GitHub. Markdown um formato de texto que permite a criao de documentos formatados usando simples marcaes de texto em vez de cdigo HTML. amplamente utilizado em projetos de cdigo aberto e plataformas de colaborao, como o GitHub, para criar documentos de texto como arquivos de leia-me, relatrios de erro e comentrios de cdigo.

A extenso 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 cdigo open source desenvolvido pelo Microsoft Visual Studio Code. Ele oferece uma variedade de recursos, como destaques de sintaxe, pr-visualizao em tempo real e suporte para mltiplas linguagens de programao. Isso pode ser til se voc precisar escrever documentos markdown no GitHub e desejar um editor mais avanado do que o editor padro do site.

Download Monaco Markdown Editor For GitHub

4. ColorZilla

ColorZilla Guia de TI

ColorZilla uma das extenses do Chrome mais essenciais para Designers, que fornece uma variedade de ferramentas para trabalhar com cores na web. A extenso adiciona uma paleta de cores interface do navegador, permitindo que voc veja as cores de um site e as copie para a rea de transferncia. Alm 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 extenso para copiar a cor de um elemento de um site e col-la em seu prprio cdigo HTMLou CSS. Alm disso, a extenso tambm pode ser til para designers grficos que precisam selecionar cores para usar em projetos.

Download ColorZilla

5. Email Hunter

Email Hunter Guia de TI

Email Hunter uma extenso do Chrome que permite aos usurios encontrar endereos de e-mail em sites da web. Quando voc visita um site, a extenso examina o cdigo-fonte da pgina e procura por endereos de e-mail. Ela ento exibe uma lista de endereos de e-mail encontrados e permite que voc os copie para a rea de transferncia.

Email Hunter pode ser til se voc estiver procurando por endereos de e-mail de contato de uma empresa ou indivduo. 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 negcios, pode ser til ter um endereo de e-mail para enviar sua mensagem. No entanto, importante lembrar que o uso de endereos de e-mail deve ser feito de maneira responsvel e respeitosa e que a privacidade das pessoas deve ser levada em considerao.

Download Email Hunter

6. SVG Export

SVG Export Guia de TI

SVG Export uma extenso do Chrome que permite aos usurios 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 grficos.

A extenso SVG Export adiciona um boto interface do navegador que permite salvar imagens em formato SVG. Quando voc clica no boto, a extenso examina a pgina 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.

Download SVG Export

7. Save Image As PNG

Save Image As PNG Guia de TI

Save Image As PNG uma extenso do Chrome que permite aos usurios 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 compresso sem perda de qualidade. Ele especialmente til para imagens com reas transparentes, como cones e grficos.

A extenso adiciona a opo Salvar imagem como PNG ao menu de contexto de imagens. Converte uma imagem em PNG antes de exibir o dilogo Salvar como.

O WebP um novo formato de imagem desenvolvido pelo Google. Essas imagens so pequenas, mas seu formato ainda no amplamente reconhecido. Ao converter a imagem em PNG, voc poder us-la em programas de edio de imagem e/ou fazer upload dela para sites de hospedagem de imagens online.

Download Save Image As PNG

8. User-Agent Switcher for Chrome

User-Agent Switcher for Chrome Guia de TI

User-Agent Switcher for Chrome uma extenso 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 pgina solicitada. Ele informa ao servidor qual o navegador sendo usado, qual a plataforma (por exemplo, Windows ou macOS) e qual a verso do navegador.

A extenso User-Agent Switcher for Chrome adiciona uma opo interface do navegador que permite alterar o user agent do navegador. Isso pode ser til em vrias situaes, como ao testar como um site exibido em diferentes navegadores ou plataformas, ou ao contornar restries 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.

Download User-Agent Switcher for Chrome

9. SelectorGadget

SelectorGadget Guia de TI

SelectorGadget uma extenso do Chrome que facilita a seleo de elementos em uma pgina da web. especialmente til para desenvolvedores que trabalham com CSS (Cascading Style Sheets) e precisam identificar elementos especficos em uma pgina para alterar sua aparncia ou comportamento.

Ao instalar a extenso, um cone adicionado barra de ferramentas do navegador. Quando voc clica no cone, o SelectorGadget ativado e exibe um marcador vermelho na pgina. Voc pode ento clicar em elementos na pgina para adicion-los seleo. A extenso ir exibir o cdigo CSS correspondente aos elementos selecionados, o que pode ser til para identificar o melhor seletor para usar em um estilo CSS. Alm disso, a extenso tambm oferece opes para ajustar a seleo e remover elementos indesejados da seleo.

Download SelectorGadget

10. Magical Text Expander & Autofill

Magical Text Expander & Autofill Guia de TI

Magical Text Expander & Autofill uma extenso do Chrome que permite aos usurios criar atalhos para textos e informaes comuns que so digitados com frequncia. Por exemplo, voc pode criar um atalho para seu endereo de e-mail ou para um pargrafo comum de texto que voc usa em respostas de e-mail. Quando voc digita o atalho, a extenso o substitui pelo texto ou informao correspondente.

A extenso tambm inclui uma opo de autocompletar, que sugere palavras ou frases enquanto voc digita. Isso pode ser til para economizar tempo e reduzir erros de digitao. Alm disso, a extenso permite que voc crie grupos de atalhos e os organize em categorias, o que pode ser til se voc tiver muitos atalhos diferentes.

Download Magical Text Expander & Autofill

11. Web Vitals

Web Vitals Guia de TI

Web Vitals uma extenso do Chrome que fornece uma viso geral das mtricas chave de experincia do usurio de um site. Essas mtricas incluem fatores como velocidade de carregamento, interao e estabilidade do layout. Elas so consideradas mtricas vitais porque tm um impacto significativo na experincia do usurio e podem afetar o desempenho de um site em pesquisas e em outras mtricas de desempenho.

Ao instalar a extenso, voc pode ver uma anlise das mtricas vitais de um site quando voc visita o site. A extenso exibe uma pontuao de desempenho para cada mtrica 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. Alm disso, a extenso tambm fornece recomendaes sobre como melhorar o desempenho de um site.

Download Web Vitals

12. ModHeader Modify HTTP headers

ModHeader Modify HTTP headers Guia de TI

ModHeader Modify HTTP headers uma extenso do Chrome que permite aos usurios alterar os cabealhos HTTP de uma solicitao de pgina da web. Os cabealhos HTTP so dados enviados pelo navegador ao servidor junto com uma solicitao de pgina. Eles podem conter informaes como o tipo de navegador sendo usado, a linguagem preferida pelo usurio e outras informaes.

A extenso ModHeader Modify HTTP headers adiciona uma opo interface do navegador que permite alterar os cabealhos HTTP de uma solicitao de pgina. Isso pode ser til em vrias situaes, como testar como um site exibido em diferentes navegadores ou plataformas ou contornar restries de acesso baseadas em cabealhos HTTP. No entanto, importante lembrar que alterar os cabealhos HTTP pode afetar o comportamento de um site e pode levar a resultados inesperados.

Download ModHeader Modify HTTP headers

13. Tampermonkey

Tampermonkey Guia de TI

Tampermonkey uma das mais conhecidas extenses do Chrome, ela permite aos usurios instalar e gerenciar scripts de usurio em sites da web. Os scripts de usurio so pequenos trechos de cdigo que podem ser executados no navegador para modificar o comportamento ou a aparncia de um site. Eles so amplamente utilizados por desenvolvedores para adicionar novas funcionalidades a sites, corrigir problemas ou personalizar a aparncia de um site.

A extenso Tampermonkey permite que voc instale e gerencie scripts de usurio no Chrome. Ela adiciona uma opo interface do navegador que permite instalar e ativar scripts de usurio para um site especfico. Isso pode ser til se voc quiser adicionar novas funcionalidades a um site ou modificar o comportamento de um site de acordo com suas preferncias. No entanto, importante lembrar que os scripts de usurio podem afetar o comportamento de um site e podem levar a resultados inesperados. importante instalar scripts de fontes confiveis e verificar se eles esto atualizados e mantidos.

Download Tampermonkey

14. EditThisCookie

EditThisCookie Guia de TI

EditThisCookie uma extenso do Chrome que permite aos usurios gerenciar cookies em um site da web. Os cookies so pequenos arquivos de dados armazenados no navegador que so enviados pelo servidor a cada vez que uma pgina solicitada. Eles podem conter informaes como preferncias de usurio, sesses de login e outros dados que so usados para personalizar a experincia de um usurio em um site.

A extenso EditThisCookie adiciona uma opo interface do navegador que permite ver, adicionar, modificar ou excluir cookies de um site. Isso pode ser til em vrias situaes, como ao testar o comportamento de um site com diferentes configuraes 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 extenso com cuidado e entender como os cookies so usados em um site antes de alter-los.

Download EditThisCookie

15. WhatFont

WhatFont Guia de TI

WhatFont uma das extenses do Chrome excelentes que permite aos usurios verificar qual fonte usada em um texto especfico 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 extenso, um cone adicionado barra de ferramentas do navegador. Quando voc clica no cone, o cursor muda para uma lupa. Voc pode ento clicar em qualquer texto na pgina para ver qual fonte usada. A extenso exibe o nome da fonte, o estilo (por exemplo, negrito ou itlico) 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 especificaes de design.

Download WhatFont

16. Open Frame

Open Frame Guia de TI

Open Frame uma extenso do Chrome que permite aos usurios abrir o contedo de um quadro em uma nova guia do navegador. Os quadros so elementos HTML que permitem dividir a pgina em reas independentes e exibir contedo diferente em cada rea. Eles so amplamente usados em sites da web para exibir contedo de outros sites ou para dividir a pgina em reas de navegao e contedo.

A extenso Open Frame adiciona um boto interface do navegador que permite abrir o contedo de um quadro em uma nova guia. Isso pode ser til se voc quiser acessar o contedo de um quadro sem sair da pgina atual ou se voc quiser ver o contedo de um quadro sem outros elementos da pgina. No entanto, importante lembrar que a extenso s funcionar se o site permitir o acesso ao contedo de um quadro. Alguns sites podem bloquear o acesso aos quadros para evitar o uso indevido do contedo.

Download Open Frame

17. Resolution Test

Resolution Test Guia de TI

Resolution Test uma extenso do Chrome que permite aos usurios testar como um site exibido em diferentes resolues de tela. A resoluo de tela o nmero de pixels que um monitor ou dispositivo pode exibir em largura e altura. Sites da web podem ser projetados para se adaptar a diferentes resolues de tela, mas s vezes podem ter problemas de exibio em resolues especficas.

Ao instalar a extenso, um cone adicionado barra de ferramentas do navegador. Quando voc clica no cone, a extenso exibe uma lista de resolues de tela comuns. Voc pode selecionar uma resoluo e clicar em Aplicar para ver como o site exibido naquela resoluo. Isso pode ser til se voc quiser testar como um site exibido em diferentes resolues ou se voc quiser ver como o site exibido em uma resoluo especfica. Alm disso, a extenso tambm permite que voc digite uma resoluo personalizada para testar.

Download Resolution Test

18. Shortkeys (Custom Keyboard Shortcuts)

Shortkeys (Custom Keyboard Shortcuts) Guia de TI

Shortkeys (Custom Keyboard Shortcuts) uma extenso do Chrome que permite aos usurios criar atalhos de teclado personalizados para aes comuns no navegador. Os atalhos de teclado so combinaes de teclas que podem ser pressionadas para realizar uma ao rapidamente. Eles so amplamente usados para economizar tempo e tornar a navegao mais eficiente.

A extenso Shortkeys (Custom Keyboard Shortcuts) adiciona uma opo interface do navegador que permite criar atalhos de teclado personalizados. Voc pode definir uma combinao de teclas e associ-la a uma ao, como abrir uma guia, atualizar a pgina ou ir para o incio do site. Isso pode ser til se voc quiser criar atalhos para aes que no so includas por padro no navegador ou se voc quiser personalizar os atalhos existentes. Alm disso, a extenso permite que voc importe e exporte conjuntos de atalhos, o que pode ser til se voc quiser usar os mesmos atalhos em vrios computadores ou navegadores.

Download Shortkeys (Custom Keyboard Shortcuts)

19. Lighthouse

Lighthouse Guia de TI

Lighthouse uma extenso do Chrome que fornece uma anlise de desempenho, acessibilidade, SEO e outras mtricas 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 extenso, um cone adicionado barra de ferramentas do navegador. Quando voc clica no cone, a extenso inicia uma anlise do site atual e exibe os resultados em uma pgina de relatrio. O relatrio inclui informaes sobre o tempo de carregamento, a optimizao de imagens, a acessibilidade e outras mtricas. Alm disso, a extenso fornece recomendaes 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 padres de qualidade recomendados.

Download Lighthouse

20. Pesticide for Chrome

Pesticide for Chrome Guia de TI

Pesticide for Chrome uma extenso do Chrome que adiciona uma opo interface do navegador que permite exibir as caixas de layout de um site da web. As caixas de layout so elementos visuais que mostram como os elementos de um site so organizados em relao uns aos outros. Eles so amplamente usados por desenvolvedores e designers para entender como um site estruturado e para identificar problemas de layout.

Ao instalar a extenso, um cone adicionado barra de ferramentas do navegador. Quando voc clica no cone, a extenso adiciona uma camada de caixas de layout sobre o site atual. As caixas de layout so exibidas em volta dos elementos da pgina e so coloridas de acordo com o tipo de elemento (por exemplo, elementos de cabealho so exibidos em azul). Isso pode ser til se voc quiser ver como os elementos de um site so organizados ou se voc quiser identificar problemas de layout. Alm disso, a extenso permite que voc altere as opes de exibio das caixas de layout, como a cor e a espessura das linhas

Download Pesticide for Chrome

21. CSS Viewer for Google Chrome

CSS Viewer for Google Chrome Guia de TI

CSS Viewer for Google Chrome uma extenso do Chrome que permite aos usurios ver informaes sobre os estilos CSS(Cascading Style Sheets) aplicados a um elemento da pgina da web. Os estilos CSSso usados para definir a aparncia de elementos HTML, como fontes, cores, margens e outros aspectos visuais. Eles so amplamente usados por desenvolvedores e designers para controlar a aparncia de um site.

Ao instalar a extenso, um cone adicionado barra de ferramentas do navegador. Quando voc clica no cone, o cursor muda para uma lupa. Voc pode ento clicar em qualquer elemento da pgina para ver as informaes de estilo CSS aplicadas a ele. A extenso 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. Alm disso, a extenso permite que voc copie as informaes de estilo para a rea de transferncia para uso posterior.

Download CSS Viewer for Google Chrome

22. Web Developer

Web Developer Guia de TI

A extenso Web Developer para Chrome uma ferramenta de desenvolvimento de websites para o navegador Google Chrome. Ela adiciona uma srie de recursos e opes teis ao navegador que podem ser usados para testar, depurar e otimizar websites. Alguns dos recursos incluem:

• Verificao de cdigo HTML e CSS
• Ferramentas para testar o responsivo de um site
• Ferramentas de depurao de JavaScript
• Opes para desabilitar o cache do navegador
• Ferramentas para visualizar a estrutura do DOM (Document Object Model) de um site
• Opes para editar o cdigo HTML e CSS em tempo real
• Ativar e desativar recursos de um site

A extenso Web Developer uma ferramenta valiosa para qualquer pessoa que desenvolva websites, pois oferece uma srie de recursos teis para facilitar o processo de desenvolvimento e depurao de sites.

Download Web Developer

Compartilhe!

Conhece outras extenses do Chrome que no est listada acima?

Deixe suas sugestes nos comentrios!

O post 22 Extenses do Chrome focadas em produtividade para Desenvolvedores, Techs e Designers apareceu primeiro em Guia de TI.