Aumente a produtividade do seu desenvolvedor web

Última atualização em 13 de outubro de 2020

Se você gosta de fazer desenvolvimento web como eu, deve saber a importância de ter ótimas ferramentas em seu navegador web que simplificam seu trabalho e aumentam sua produtividade. Esse é o caso do Google Chrome e da oferta abrangente do Chrome Extensions que aumentará a produtividade do seu desenvolvedor web.

Sim, o Firefox é um excelente navegador para desenvolvimento web, e o Firefox Developer Edition é fantástico para depuração e teste de CSS. No entanto, o Chrome tem uma longa lista de extensões de ferramentas que oferecem suporte para os mais recentes recursos da Web e ferramentas de desenvolvedor que o tornam o favorito entre muitos desenvolvedores da Web para aumentar a produtividade dos desenvolvedores da Web.

O Chrome Marketplace tem algumas das melhores extensões, mais antigas ou novas, para ajudar os desenvolvedores a desenvolver e testar um site ou página de destino. Abaixo, você conhecerá algumas das melhores extensões que sugiro como “obrigatórias” em sua caixa de ferramentas de desenvolvimento web.

Extensões do Chrome que aumentam a produtividade do desenvolvedor da Web

Assistente de tags

O Tag Assistant ajuda a solucionar problemas de instalação de várias tags do Google, incluindo Google Analytics, Google Tag Manager, etc. O Tag Assistant permite verificar se você instalou diferentes tags do Google corretamente em sua página. Basta navegar para qualquer página e o Assistente de tags informará quais tags estão presentes, relatará quaisquer erros que encontrarmos e sugerirá melhorias que podem ser feitas em sua implementação. A maioria das tags do Google são verificadas, incluindo o Google Analytics, o acompanhamento de conversões do Google AdWords, o Gerenciador de tags do Google etc.

WhatRuns

Descubra o que executa um site - estruturas, ferramentas de análise, plug-ins do WordPress, fontes - você escolhe. A extensão WhatRuns está a um clique de distância para você encontrar as tecnologias usadas em qualquer site que visitar. Ele detecta até mesmo as ferramentas e serviços novos e futuros, desde Ferramentas de Desenvolvedor e Redes de Anúncios até Plugins e Temas do WordPress. Não apenas isso – você pode seguir sites para ser notificado quando eles usarem novas tecnologias ou removerem as existentes.

Vue.js Devtools

Seu nome é muito explícito. É uma extensão Chrome e Firefox DevTools para depuração de aplicativos Vue.js. Ele permite que você inspecione as hierarquias de componentes do Vue.js nas Ferramentas do desenvolvedor do Chrome. Você receberá uma nova guia em seu Chrome DevTools: “Vue”.

Ferramentas de Desenvolvedores React

Como o Vue.js Devtools, o React Developer Tools é uma extensão do Chrome e Firefox DevTools para a biblioteca React JavaScript de código aberto. Ele permite que você inspecione as hierarquias de componentes do React nas Ferramentas do desenvolvedor do Chrome. Você receberá duas novas guias em seu Chrome DevTools: “Componentes” e “Profiler”. A guia Componentes mostra os componentes raiz do React que foram renderizados na página e os subcomponentes que eles acabaram renderizando. Ao selecionar um dos três componentes, você pode inspecionar e editar seus adereços e estados atuais no painel à direita. Nos breadcrumbs, você pode inspecionar o componente selecionado, o componente que o criou, o componente que o criou, etc.

Visualizador de JSON incrível

Essa extensão ajuda você a visualizar a resposta JSON de qualquer site ou solicitação de API em seu navegador. Ele apresenta experiências incríveis de embelezamento JSON. Ele tem muitos recursos exclusivos que o tornam incrível. Ele ajuda os desenvolvedores a formatar ou embelezar o JSON e percorrer as propriedades em uma visualização gráfica. Ele possui um gráfico amigável e interativo que representa a resposta do servidor ou o JSON fornecido na seção de entrada na visualização gráfica.

Inspetor de SEO META

Útil para inspecionar os metadados encontrados nas páginas da web, geralmente não visíveis durante a navegação. Metadados não são apenas as metatags HTML usuais, mas as tags XFN, vários microformatos, o atributo canônico introduzido recentemente, os links no-follow, etc. siga as Diretrizes do Google para webmasters, mas mesmo para quem está curioso sobre qualquer conteúdo de página que geralmente não é visível, mas pode revelar propriedades interessantes do site. Ele também tem uma opção de impressão/exportação que permite imprimir ou salvar como PDF o relatório ou copiar/colar os dados em sua ferramenta preferida.

Visualizador rápido de estilo HTML

Visualizador rápido de estilo de elemento HTML DOM. Basta mover o mouse e ele mostra os estilos do alvo.

Visualizador de CSS

CSSViewer é um visualizador de propriedades CSS simples para Chrome e Firefox. Para habilitar o CSSViewer, clique no ícone da barra de ferramentas e passe o mouse sobre qualquer elemento que deseja inspecionar na página atual.

Fontes Ninja

Identifique fontes de qualquer site, marque-as, experimente e compre-as. Ele analisa os arquivos de fonte para obter resultados mais precisos. Passe qualquer texto para obter o nome da fonte e as propriedades CSS. A janela principal da extensão também exibirá um resumo de todas as fontes usadas em um site. Você pode obter mais informações sobre fontes. Verifique quantos estilos estão disponíveis, sua fundição e preço.

Adoro adaptável – Teste móvel/responsivo

Ferramenta para testar sites responsivos. A extensão do Chrome ILOVEADAPTIVE adiciona um botão à sua barra de ferramentas. Quando você clicar no botão, ele abrirá o URL em que você está na guia atual. Os principais recursos incluem visualizar um URL em vários dispositivos ao mesmo tempo, filtrar os dispositivos, filtrar o sistema operacional, alterar sua quantidade, zoom, mostrar painel ios, alternar para paisagem e retrato.

Dados vitais da Web

Avalie as métricas de um site íntegro. Os Web Vitals são sinais de qualidade essenciais para oferecer um excelente UX na web (https://web.dev/vitals). Essa extensão mede os Core Web Vitals, fornecendo feedback instantâneo sobre as métricas de carregamento, interatividade e mudança de layout. É consistente com a forma como essas métricas são medidas pelo Chrome e relatadas a outras ferramentas do Google.

Régua de página Redux

Uma régua Web Developer\Designer para obter dimensões de pixel perfeitas e posicionamento para medir elementos em qualquer página da web. O Page Ruler Redux é uma ferramenta central de desenvolvedor e designer da Web que permite obter medições perfeitas em pixels de elementos da Web. Ele foi projetado para desenvolvimento de front-end de sites, design da web ou qualquer tarefa que você possa precisar para obter medições perfeitas de pixels de qualquer elemento da web.

Régua de Grade

Crie grades e meça sua distância facilmente. Permite criar grades verticais e horizontais, estilo Photoshop. Possui uma régua para medir a distância entre suas grades também.

Esboce-o

Essa extensão descreve todos os elementos HTML em uma página da Web, permitindo que você veja as bordas dos elementos. A extensão suporta todas as cores do arco-íris (vermelho, laranja, amarelo, verde, azul, índigo e violeta). Ele também tem a funcionalidade de remover o contorno depois de aplicado.

Emulador de navegador móvel

Teste páginas da Web móveis e responsivas em sua área de trabalho. Selecione as resoluções de tela móvel mais comuns com um único clique do mouse. A página da guia ativa será aberta em uma janela separada.

Bem, essa é a minha lista de extensões do Chrome que sugiro que você tenha em seu navegador Chrome para aumentar a produtividade do desenvolvedor da web. Sim, sim… Existem outras extensões úteis e legais por aí que não incluí na lista acima. Mas, quando chegar a hora, continuarei explorando outras extensões fantásticas que provavelmente serão listadas em um blog futuro.