Chrome DevTools: Elements, Console e Network
Navegue pelos painéis Elements, Console e Network para inspecionar estilos, depurar erros de JavaScript e monitorar solicitações HTTP.
Chrome DevTools: Elements, Console e Network é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 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.
Abrindo o DevTools com eficiência
Clique com o botão direito em qualquer elemento e escolha Inspecionar para abrir o DevTools com esse elemento selecionado. F12 alterna o painel. Cmd+Shift+C (Mac) ou Ctrl+Shift+C (Windows) ativa diretamente o modo de inspeção sem abrir o painel completo.
Painel Elementos — inspetor do DOM
O painel Elementos mostra a árvore DOM ativa e analisada — não o código-fonte HTML bruto. Ele reflete as modificações feitas pelo JavaScript. Passe o cursor sobre os nós para destacá-los na página. Clique duas vezes para editar o HTML diretamente.
Painéis Estilos e Calculado
Com um elemento selecionado, o painel Estilos mostra todas as regras CSS aplicadas, ordenadas por especificidade. As regras riscadas foram substituídas. O painel Calculado mostra os valores finais calculados para cada propriedade.
Forçando estados dos elementos
Clique no botão :hov no painel Estilos para forçar um estado CSS como :hover, :focus, :active ou :visited. Inspecione os estilos de foco sem precisar manter o cursor perfeitamente parado.
Visualizador do modelo de caixa
O painel Calculado mostra um diagrama interativo do modelo de caixa: conteúdo, preenchimento, borda e margem. Passe o cursor sobre cada região para ver seu valor. Clique para editar os valores de margem e preenchimento em tempo real.
Noções básicas do console — registro e execução de código
O console mostra erros, avisos e registros. Digite qualquer expressão JavaScript e pressione Enter para avaliá-la na página atual. Use o console como um REPL interativo para testar trechos de código instantaneamente.
// Examples to type in the Console:
document.title
document.querySelectorAll('a').length
['a','b','c'].map(x => x.toUpperCase())Métodos da API do console
Além de console.log: console.warn() (aviso amarelo), console.error() (vermelho), console.table() (exibe uma matriz ou um objeto como tabela), console.group() / console.groupEnd() para saída agrupada e console.time() para medir o tempo.
Visão geral do painel Rede
Cada solicitação HTTP (HTML, JS, CSS, imagens, XHR, Fetch) aparece como uma linha. As colunas mostram o método, o status, o tamanho e o tempo. Clique em uma linha para ver todos os detalhes da solicitação e da resposta.
Filtrando solicitações de rede
Use a barra de filtros para pesquisar por URL ou filtrar por tipo: Todos, XHR/Fetch, JS, CSS, Imagem, Mídia, Fonte, WS. O filtro XHR/Fetch é mais útil ao depurar chamadas de API feitas pelo JavaScript.
Inspecionando solicitação e resposta
Selecione uma solicitação de rede para ver: Cabeçalhos (da solicitação e da resposta), Visualização (JSON/HTML formatados), Resposta (corpo bruto) e Tempo (fases da conexão). A aba Carga útil mostra os parâmetros do corpo da solicitação POST.
Limitação — simulando redes lentas
Clique no menu suspenso de limitação (padrão: Sem limitação) para simular 3G lento, 3G rápido ou off-line. A caixa de seleção Desativar cache impede que o navegador use recursos armazenados em cache durante os testes.
Verificação rápida
Onde no Chrome DevTools você pode ver todas as regras CSS aplicadas a um elemento selecionado, incluindo as que foram substituídas?
Recapitulação: painéis do Chrome DevTools
Elementos: inspecione e edite o DOM e o CSS ativos. Force pseud estados para inspecionar estilos de foco. Console: registre, depure e execute JS em tempo real. Rede: monitore todas as solicitações HTTP, inspecione cabeçalhos e respostas e aplique limitação para simular conexões lentas.
Perguntas Frequentes
A aula “Chrome DevTools: Elements, Console e Network” é grátis?
Sim — o texto completo de “Chrome DevTools: Elements, Console e Network” é 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 “Chrome DevTools: Elements, Console e Network”?
Navegue pelos painéis Elements, Console e Network para inspecionar estilos, depurar erros de JavaScript e monitorar solicitações HTTP. 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 1 de 4.
Quanto tempo leva a aula “Chrome DevTools: Elements, Console e Network”?
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
- Chrome DevTools: Elements, Console e Network
- VSCode: extensões, Emmet e atalhos
- Configuração do Prettier e do ESLint
- Compatibilidade de navegadores e caniuse.com