As extensões do Chrome que a maioria dos desenvolvedores web acaba mantendo se dividem em cinco grupos: devtools de frameworks (React, Vue, Angular, Redux), verificadores de acessibilidade (axe DevTools, WAVE), inspetores de página (Web Developer, WhatFont, ColorZilla, Wappalyzer), uma ferramenta de visualização mobile e alguns utilitários. Instale só o que você usa toda semana: cada extensão pede permissões e pode deixar o navegador mais lento. A lista abaixo explica o que cada uma faz que o Chrome DevTools ainda não faz.
Transparência: o Mobile View Extension, que aparece na seção de mobile, é nosso. As outras extensões são de outros desenvolvedores e entraram na lista porque resolvem uma necessidade clara.
O que o Chrome DevTools já oferece
Antes de instalar qualquer coisa, vale saber o que já vem no navegador. O Chrome DevTools tem inspeção de elementos e CSS, depurador de JavaScript, gravação de rede e desempenho, emulação de dispositivos móveis (guia), troca de user agent (guia), auditorias do Lighthouse (guia), conta-gotas e verificação de contraste no painel Styles, além do CSS Overview. Muitas extensões antigas “para desenvolvedor web” repetem esses recursos. Nosso guia do Chrome DevTools mostra os painéis integrados.
Devtools de frameworks
| Extensão | Criada por | O que adiciona |
|---|---|---|
| React Developer Tools | Meta (equipe do React) | Painéis Components e Profiler: inspecionar props, state e hooks, achar renderizações lentas |
| Vue.js devtools | Equipe do Vue | Árvore de componentes, estado do Pinia, router e timeline para apps Vue |
| Angular DevTools | Equipe do Angular | Explorador de componentes e profiler de change detection |
| Redux DevTools | Mantenedores do Redux | Log de actions, diff de estado e depuração “time travel” para Redux e stores compatíveis |
Instale a do framework que você usa. Elas só são ativadas em páginas que usam esse framework.
Verificadores de acessibilidade
O axe DevTools (da Deque) adiciona um painel ao DevTools que procura problemas de WCAG na página, como rótulos ausentes, contraste baixo e erros de ARIA, com explicações e links para cada regra. A versão gratuita cobre as verificações automáticas.
O WAVE (da WebAIM) coloca ícones sobre a própria página mostrando onde está cada erro, alerta e elemento estrutural. É ótimo para explicar problemas para designers e redatores.
Verificadores automáticos pegam só uma parte dos problemas de acessibilidade. Use junto com testes pelo teclado e um leitor de tela.
Inspetores de página
O Web Developer (de Chris Pederick) é uma barra de ferramentas veterana com centenas de pequenos recursos: desativar CSS ou JavaScript, contornar elementos, mostrar o texto alternativo das imagens, ver detalhes de formulários e muito mais. Boa parte disso existe em algum lugar do DevTools, mas a barra deixa tudo a um clique.
O WhatFont identifica a fonte do texto sob o cursor, incluindo a fonte alternativa que está de fato em uso.
O ColorZilla adiciona um conta-gotas para capturar cores de qualquer lugar da página, além de histórico de cores e gerador de gradientes.
O Wappalyzer mostra as tecnologias de um site: CMS, frameworks, analytics e hospedagem. Ajuda a pesquisar concorrentes e a entender a stack de um cliente antes de um projeto.
Visualização mobile e testes de responsividade
O modo dispositivo do DevTools é poderoso, mas exige vários passos em cada aba e ocupa boa parte da tela. Se você confere layouts mobile muitas vezes por dia, uma extensão dedicada economiza tempo.
O Mobile View Extension recarrega a aba atual dentro de uma moldura de celular ou tablet, com user agent, client hints, tamanho de tela e densidade de pixels do aparelho escolhido. Você escolhe perfis Apple e Android ou digita uma resolução personalizada, gira para paisagem e salva um print em PNG da visualização com moldura. Funciona em localhost, continua ativo enquanto você navega e não coleta dados de navegação. Os limites são os mesmos da maioria das prévias dentro do navegador: a interação é pelo mouse, sem eventos de toque, e algumas media queries como hover e pointer não são totalmente emuladas. Há uma comparação completa em simulador mobile em extensão ou DevTools.
Utilitários
Uma extensão de visualizador de JSON formata respostas JSON brutas como uma árvore recolhível quando você abre uma URL de API. Por padrão, o Chrome mostra texto puro.
Um user agent switcher é útil se você testa com frequência detecção de dispositivo ou código específico de navegador. Leia antes o que um user agent switcher faz; para layouts mobile, uma ferramenta de visualização mobile funciona melhor.
Como saber se uma extensão é segura
Extensões para desenvolvedores costumam pedir acesso a todos os sites, ou seja, podem ler e alterar qualquer página aberta, inclusive painéis administrativos e e-mail. Antes de instalar:
- Veja quem publica. As devtools de um framework devem vir da própria equipe do framework.
- Leia as permissões na página da Chrome Web Store. Um identificador de fontes não precisa acessar seus downloads.
- Leia a política de privacidade. Ela deve dizer o que é coletado. “Nada” é uma boa resposta para a maioria das ferramentas de desenvolvimento.
- Confira a data da última atualização. Extensões abandonadas quebram com as atualizações do Chrome e ficam sem correções de segurança.
- Fique de olho em trocas de dono. Extensões populares às vezes são vendidas e passam a injetar anúncios. Se o comportamento de uma extensão mudar de repente, remova.
Use um perfil do Chrome separado para desenvolvimento se quiser manter essas extensões longe da sua navegação pessoal.
Um kit mínimo para começar
Se estiver configurando um computador novo, comece com:
- as devtools do seu framework;
- axe DevTools ou WAVE;
- uma extensão de visualização mobile;
- WhatFont ou ColorZilla, se você trabalha perto do design.
Adicione outras só quando perceber que está repetindo uma tarefa que uma delas resolveria.
Perguntas frequentes
Qual é a extensão do Chrome mais útil para desenvolvedores web?
As devtools do framework que você usa, porque nada no Chrome substitui. Depois delas, um verificador de acessibilidade e uma ferramenta de visualização mobile são as que mais ajudam a maioria dos desenvolvedores front-end.
Extensões deixam o Chrome mais lento?
Cada extensão usa memória e pode rodar scripts em todas as páginas. Algumas extensões bem feitas quase não pesam; dezenas delas podem atrasar o carregamento das páginas e o DevTools. Desative as que você não usa.
O Lighthouse é uma extensão?
O Lighthouse vem integrado ao Chrome DevTools como um painel. Existe também uma extensão separada do Lighthouse, mas o normal é rodar pelo DevTools.