0Pricing
Frontend Academy · Aula

Ferramentas de desenvolvedor: abrindo e usando o DevTools

Abra o Chrome DevTools, inspecione elementos, leia o console, acompanhe solicitações de rede e edite CSS ao vivo no navegador.

Ferramentas de desenvolvedor: abrindo e usando o DevTools é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

O que são as DevTools do navegador?

Todo navegador moderno vem com um conjunto integrado de ferramentas para desenvolvedores. As DevTools permitem inspecionar HTML e CSS, depurar JavaScript, analisar o desempenho, monitorar solicitações de rede e muito mais — tudo sem sair do navegador.

Abrindo as DevTools

Abra as DevTools com F12 (Windows/Linux) ou Cmd+Option+I (Mac). Você também pode clicar com o botão direito em qualquer elemento e escolher Inspecionar. O atalho Ctrl+Shift+J / Cmd+Option+J abre diretamente o Console.

O painel Elementos

O painel Elementos mostra a árvore DOM em tempo real. Clique em qualquer elemento para selecioná-lo e ver seus estilos calculados no painel Estilos. Você pode clicar duas vezes para editar valores de HTML ou CSS em tempo real — as alterações são instantâneas, mas não são salvas no arquivo.

Editando CSS em tempo real

No painel Estilos, clique em qualquer valor de propriedade para alterá-lo. Adicione novas regras com o botão +. Use as caixas de seleção para desativar regras. Essa é a maneira mais rápida de criar protótipos em CSS sem alternar para o editor.

O painel Console

O Console mostra mensagens registradas, avisos e erros. Você também pode digitar JavaScript diretamente e executá-lo. Use console.log(), console.warn(), console.error() e console.table() para exibir dados durante a depuração.

// Log different types
console.log('value:', myVar);
console.table([{name:'Alice'}, {name:'Bob'}]);
console.error('Something went wrong');

O painel Rede

O painel Rede mostra cada solicitação HTTP feita pela página. Selecione uma solicitação para ver seus cabeçalhos, visualizar o corpo da resposta e conferir a cascata de tempos. Filtre por tipo: XHR/Fetch, JS, CSS, imagens e fontes.

Lendo o tempo das solicitações

Cada solicitação mostra: Enfileirada, Pesquisa de DNS, Conexão inicial, SSL, Solicitação enviada, Aguardando (TTFB) e Download de conteúdo. TTFB (Tempo até o primeiro byte) reflete o tempo de resposta do servidor.

Limitando a rede

Use o menu suspenso de limitação do painel Rede para simular condições de 3G lenta ou ausência de conexão. Isso revela problemas de desempenho invisíveis em uma banda larga rápida e ajuda você a criar experiências que funcionem para usuários com conexões ruins.

Modo de dispositivo

Clique no ícone de dispositivo (Ctrl+Shift+M / Cmd+Shift+M) para entrar no Modo de dispositivo. Simule áreas de visualização móveis, DPR, eventos de toque e condições de rede. Escolha predefinições como iPhone 14 ou defina uma largura personalizada.

O painel Fontes

O painel Fontes permite ler e definir pontos de interrupção nos seus arquivos JavaScript. Um ponto de interrupção pausa a execução para que você possa inspecionar valores de variáveis e a pilha de chamadas, além de percorrer o código linha a linha com F10 (avançar sem entrar) e F11 (entrar).

Pontos de interrupção e o depurador

Adicione um ponto de interrupção clicando no número de uma linha em Fontes. Quando a execução for pausada, passe o cursor sobre as variáveis para ver seus valores ou digite-as no Console. Use o painel Pilha de chamadas para ver quais funções levaram a este ponto.

// You can also trigger a breakpoint in code:
debugger; // execution pauses here when DevTools is open

Verificação rápida

Qual painel do DevTools mostra todas as requisições HTTP feitas pela página, incluindo seus códigos de status e tempos de resposta?

Recapitulação: seu conjunto de ferramentas do DevTools

Elementos: inspecione e edite o DOM em tempo real. Console: use log e execute JavaScript. Rede: monitore o tráfego HTTP. Fontes: defina pontos de interrupção e depure. Modo de dispositivo: teste layouts responsivos. Dominar esses quatro painéis transformará seu fluxo de trabalho de depuração.

Perguntas Frequentes

A aula “Ferramentas de desenvolvedor: abrindo e usando o DevTools” é grátis?

Sim — o texto completo de “Ferramentas de desenvolvedor: abrindo e usando o DevTools” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Ferramentas de desenvolvedor: abrindo e usando o DevTools”?

Abra o Chrome DevTools, inspecione elementos, leia o console, acompanhe solicitações de rede e edite CSS ao vivo no navegador. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Ferramentas de desenvolvedor: abrindo e usando o DevTools”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Navegadores, DNS e HTTP: o ciclo de vida de uma solicitação
  2. HTML, CSS e JavaScript: a função de cada camada
  3. Como uma página é renderizada: análise, DOM, CSSOM, layout e pintura
  4. Ferramentas de desenvolvedor: abrindo e usando o DevTools
← Voltar para Frontend Academy