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 do DevTools

Confira nossa série de vídeos mensais que explica como usar o DevTools para resolver problemas comuns de desenvolvimento da Web.
Aprenda a gravar e analisar um rastro de desempenho no DevTools para identificar e corrigir problemas de desempenho.
Depurar problemas de LCP e usar dados do CrUX para saber se você está decifrando uma experiência semelhante à dos usuários
Conheça os diferentes tipos de cache do navegador e como inspecionar e gerenciar esses caches no Chrome DevTools.
Você está tentando inspecionar um elemento e ele desaparece? É como se o código estivesse brincando de esconde-esconde com você.

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.
O painel de performance ajuda os desenvolvedores a medir e otimizar o desempenho do ambiente de execução há mais de 15 anos. Saiba como ele está evoluindo.
Faça anotações nos rastros e salve-as diretamente no arquivo de rastreamento para compartilhar de forma simples.

Notícias e atualizações

Avançar na análise de rede com o Chrome DevTools

Updated 27 de fevereiro de 2025

Avançar na análise de rede com o Chrome DevTools.

Como introduzimos o Gemini no Chrome DevTools

Updated 14 de janeiro de 2025

Conheça casos de uso divertidos e interessantes do novo painel de assistência de IA no DevTools

Gravar e analisar um trace de desempenho com as Ferramentas do desenvolvedor

Updated 5 de dezembro de 2024

Grave e analise um rastro de desempenho com as Ferramentas do desenvolvedor.

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.