O Chrome DevTools é um conjunto de ferramentas para desenvolvedores da Web integrado diretamente ao navegador Google Chrome. O DevTools permite editar páginas e diagnosticar problemas com rapidez, o que ajuda a criar sites melhores em menos tempo.
Começar Conferir as novidades
As DevTools oferecem suporte a uma ampla variedade de tarefas comuns de desenvolvimento da Web. Continue nesta página e conheça alguns dos principais recursos do DevTools. Não sabe por onde começar ou é a primeira vez que usa o DevTools? Assista uma introdução ao DevTools.
Os insights do console e a assistência de IA ajudam a depurar e corrigir erros de JavaScript, desempenho e estilo de forma mais eficiente.
Ter uma visão abrangente e útil da performance da sua página.
Saiba como inspecionar os recursos carregados pela página e editá-los no navegador.
Analise e substitua as solicitações e respostas de rede em tempo real.

Assistência de IA e insights do console

Descubra como as inovações de IA no DevTools permitem que você faça mais e mais rápido.
Use o Gemini para analisar e melhorar o estilo, a rede, as origens e a performance do seu site.
Conheça os casos de uso da assistência de IA no Chrome DevTools e saiba como ela pode ajudar no seu fluxo de trabalho de depuração em relação a estilo, desempenho e muito mais.
Entenda as mensagens e os erros do console no DevTools e aprenda a corrigi-los sem copiar e colar.

Dicas de ferramentas para desenvolvedores

Confira nossa série mensal de vídeos que mostra cenários comuns de depuração no DevTools de uma forma divertida.
Faça um tour pelo painel "Performance" atualizado, que mostra como medir as Core Web Vitals (LCP, CLS, INP) e receber conselhos personalizados do Gemini.
Navegue com o DevTools e vire um pirata da depuração! Descubra técnicas para emular estilos de foco, testar formulários com preenchimento automático e resolver erros de back-end com substituições de rede.
Conheça o poder da depuração com ajuda da IA no Chrome DevTools! Descubra como o Console Insights, a assistência de IA para estilo, desempenho, rede e fontes podem impulsionar seu fluxo de trabalho.
Conheça técnicas avançadas do painel "Rede", incluindo como encontrar gargalos de desempenho, depurar pop-ups, configurar condições de rede, usar atalhos para determinar iniciadores de solicitações de rede e muito mais.

Receber insights de desempenho

Uma ampla variedade de ferramentas para medir e otimizar diferentes aspectos do desempenho de execução: o painel "Performance", o Lighthouse e muito mais.
Saiba mais sobre todos os recursos do painel "Performance": como gravar um rastro de performance, como visualizar e analisar o rastro e muito mais.
Conheça os novos recursos das Ferramentas do desenvolvedor, como a calibração de limitação de CPU, para ajudar você a basear suas decisões de depuração de desempenho em dados do mundo real
Conheça os novos insights de desempenho e o poder do Lighthouse diretamente no painel de desempenho do DevTools.

Notícias e atualizações

Inspecionar e editar recursos

Saiba mais sobre todos os recursos do painel "Fontes": como visualizar e editar arquivos, depurar JavaScript e configurar um espaço de trabalho.
Começar
O Workspace permite salvar as alterações feitas no DevTools no código-fonte armazenado no computador. Saiba como configurar um espaço de trabalho nos seus projetos.
Leia o tutorial

Analisar a atividade de rede

Saiba mais sobre todos os recursos do painel de rede: inspecione corpos de resposta e de solicitação, substitua cabeçalhos e muito mais.
Começar
Um tutorial prático para orientar você em tarefas comuns no painel de rede.
Leia o tutorial

Mais ferramentas

Conheça todos os outros recursos e capacidades do DevTools.
Saiba como visualizar e mudar o DOM de uma página.
Saiba como visualizar e mudar o CSS de uma página.
Acompanhar alterações em HTML, CSS e JavaScript.
Registre mensagens e execute o JavaScript.
Avaliar a performance do site
Encontre problemas de memória que afetam o desempenho da página, incluindo vazamentos de memória e muito mais.
Inspecione, modifique e depure apps da Web, teste o cache, visualize o armazenamento e muito mais.
Inspecione e modifique animações.
Gravar, repetir, medir os fluxos de usuários e editar as etapas.
Descubra um conjunto de opções que afetam a renderização de conteúdo da Web.
Inspecione e depure endereços salvos.
Encontre e corrija problemas no seu site.
A página precisa estar totalmente protegida por HTTPS.
Confira informações e depure players de mídia por guia do navegador.
Emular sensores do dispositivo.
Emular autenticadores.