Ferramentas do desenvolvedor do Chrome: guia prático do DevTools

O Chrome DevTools é o conjunto de ferramentas para desenvolvedores web que vem no Google Chrome. Abra com F12, Ctrl + Shift + I no Windows e Linux ou Cmd + Option + I no Mac. Com ele você inspeciona e edita ao vivo o HTML e o CSS de uma página, roda JavaScript, vê cada requisição de rede, mede desempenho, emula celulares e audita páginas. Este guia mostra os painéis que você mais vai usar, na ordem em que normalmente são necessários, e os atalhos que mais economizam tempo.

Como abrir o DevTools e se localizar

Além dos atalhos de teclado, você pode clicar com o botão direito em qualquer elemento e escolher Inspecionar, o que abre o DevTools com o elemento já selecionado. O menu do Chrome também tem Mais ferramentas > Ferramentas do desenvolvedor.

Três controles importam desde o início:

• As abas dos painéis no topo (Elements, Console, Sources, Network e outras). Os painéis menos usados ficam escondidos atrás da seta >>.
• A posição do painel no menu de três pontos: direita, embaixo, esquerda ou janela separada. A janela separada é útil com dois monitores.
• O menu de comandos: Ctrl + Shift + P (Cmd + Shift + P no Mac). Digite o nome de qualquer recurso (“screenshot”, “disable JavaScript”, “dark mode”) para encontrá-lo. É o jeito mais rápido de descobrir o que o DevTools faz.

Elements: inspecionar e editar HTML e CSS

O painel Elements mostra o DOM ao vivo, não o código-fonte original, então inclui tudo o que o JavaScript adicionou. Selecione um nó e o painel Styles à direita mostra cada regra CSS aplicada, qual delas vence e quais estão riscadas.

Vale testar:

• Clique em qualquer valor em Styles para editar e ver o resultado na hora. As mudanças somem ao recarregar, a menos que você configure local overrides.
• Ative estados como :hover e :focus com o botão :hov para estilizar estados interativos sem segurar o mouse parado.
• Clique na amostra de cor ao lado de uma cor para abrir o seletor, que também mostra a taxa de contraste do texto.
• Abra a aba Computed para ver o valor final de cada propriedade e o box model.
• Procure os selos flex e grid ao lado dos elementos: clicar neles sobrepõe as linhas do layout na página.

Console: rodar JavaScript e ler erros

O Console mostra erros, avisos e saídas de console.log da página e permite rodar JavaScript no contexto dela. Atalhos úteis:

• $0 é o elemento selecionado no painel Elements.
• $$('a') retorna como array todos os elementos que batem com um seletor.
• copy(obj) copia um valor para a área de transferência.
• Filtre por nível (erros, avisos) e por texto para reduzir o ruído.

Sources: depurar JavaScript

O painel Sources mostra os arquivos da página e é onde você coloca breakpoints. Clique no número de uma linha para pausar ali, depois avance passo a passo e inspecione as variáveis. Breakpoints condicionais (clique com o botão direito no número da linha) só pausam quando uma expressão é verdadeira. Os Event listener breakpoints pausam em qualquer clique, tecla ou outro evento, o que ajuda quando você não sabe qual código está rodando.

Network: ver cada requisição

O painel Network lista todas as requisições da página: documentos, scripts, imagens, fontes e chamadas de API, com status, tamanho e tempo. Clique numa requisição para ver os cabeçalhos, o payload, a resposta e o detalhamento do tempo.

Usos práticos:

• Marque Disable cache para sempre carregar arquivos novos enquanto o DevTools estiver aberto.
• Use o menu Throttling para simular uma conexão móvel lenta.
• Filtre por tipo (Fetch/XHR, JS, Img) para achar a requisição que interessa.
• Clique com o botão direito numa requisição e copie como fetch ou cURL para repetir em outro lugar.

Performance: descobrir o que deixa a página lenta

Grave o carregamento de uma página ou uma interação e o painel Performance mostra uma linha do tempo do que o navegador fez: scripts, renderização, pintura e rede. Tarefas longas aparecem marcadas em vermelho. O painel também mostra as Core Web Vitals ao vivo (LCP, CLS e INP) para as suas interações e dicas das causas prováveis. Para resultados parecidos com os de um celular, ajuste o throttling de CPU para 4x ou 6x antes de gravar. Mais no guia de teste de velocidade mobile.

Application: armazenamento, cookies e service workers

O painel Application mostra o que a página armazena: cookies, local e session storage, IndexedDB, cache storage e service workers registrados. Você pode editar ou apagar entradas, o jeito mais rápido de resetar um login ou testar a experiência de primeira visita. Clear site data apaga tudo da origem atual.

Lighthouse: auditar uma página

O painel Lighthouse roda auditorias automáticas de desempenho, acessibilidade, boas práticas e SEO, em modo mobile ou desktop. Passo a passo: como fazer uma auditoria Lighthouse mobile.

Modo dispositivo: emular celulares e tablets

A barra de dispositivos (Ctrl + Shift + M ou Cmd + Shift + M com o DevTools em foco) transforma a página numa visualização de celular ou tablet, com viewport, densidade de pixels, user agent e eventos de toque correspondentes. Está tudo explicado no guia do emulador mobile do Chrome. Para conferências visuais rápidas sem abrir o DevTools, o Mobile View Extension oferece o mesmo tipo de prévia a partir de um botão na barra de ferramentas.

Atalhos que valem a pena decorar

Ampliando o DevTools

Extensões do Chrome podem adicionar painéis próprios ao DevTools: devtools de React, Vue, Angular e Redux e verificadores de acessibilidade como o axe DevTools. Há uma lista curta em extensões do Chrome para desenvolvedores web.

Perguntas frequentes

Como abrir as ferramentas do desenvolvedor no Chrome?

Pressione F12 ou Ctrl + Shift + I no Windows e Linux, Cmd + Option + I no Mac, ou clique com o botão direito na página e escolha Inspecionar.

Dá para editar um site com o Chrome DevTools?

Você pode editar o HTML e o CSS da página no seu navegador para testar mudanças. As edições são locais e somem ao recarregar; elas não alteram o site de verdade.

O Chrome DevTools é gratuito?

Sim. O DevTools faz parte do Chrome e de todos os navegadores baseados em Chromium, como Edge, Brave e Opera, sem download extra.