DevTools
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.
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.
Receber assistência de IA
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.
Entender a performance
Ter uma visão abrangente e útil da performance da sua página.
Inspecionar recursos
Saiba como inspecionar os recursos carregados pela página e editá-los no navegador.
Analisar rede
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.
Começar
Use o Gemini para analisar e melhorar o estilo, a rede, as origens e a performance do seu site.
Inspire-se
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.
Entender as mensagens do console
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.
Gravar e analisar um rastro de desempenho
Aprenda a gravar e analisar um rastro de desempenho no DevTools para identificar e corrigir problemas de desempenho.
Monitorar as Core Web Vitals em tempo real
Depurar problemas de LCP e usar dados do CrUX para saber se você está decifrando uma experiência semelhante à dos usuários
Armazenamento em cache desmistificado
Conheça os diferentes tipos de cache do navegador e como inspecionar e gerenciar esses caches no Chrome DevTools.
Congelar a tela e inspecionar elementos que desaparecem
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.
Visão geral da ferramenta de performance
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 futuro das ferramentas de performance
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.
Anotar rastros de desempenho
Faça anotações nos rastros e salve-as diretamente no arquivo de rastreamento para compartilhar de forma simples.
Notícias e atualizações
Inspecionar e editar recursos
Referência do recurso
Saiba mais sobre todos os recursos do painel "Fontes": como visualizar e editar arquivos, depurar JavaScript e configurar um espaço de trabalho.
Configurar um espaço de trabalho
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.
Analisar a atividade de rede
Painel "Network"
Saiba mais sobre todos os recursos do painel de rede: inspecione corpos de resposta e de solicitação, substitua cabeçalhos e muito mais.
Inspecionar atividade de rede
Um tutorial prático para orientar você em tarefas comuns no painel de rede.
Mais ferramentas
Conheça todos os outros recursos e capacidades do DevTools.
Elementos
Saiba como visualizar e mudar o DOM de uma página.
Estilos
Saiba como visualizar e mudar o CSS de uma página.
Alterações
Acompanhar alterações em HTML, CSS e JavaScript.
Console
Registre mensagens e execute o JavaScript.
Desempenho
Avaliar a performance do site
Memória
Encontre problemas de memória que afetam o desempenho da página, incluindo vazamentos de memória e muito mais.
Aplicativo
Inspecione, modifique e depure apps da Web, teste o cache, visualize o armazenamento e muito mais.
Animações
Inspecione e modifique animações.
Gravador
Gravar, repetir, medir os fluxos de usuários e editar as etapas.
Renderização
Descubra um conjunto de opções que afetam a renderização de conteúdo da Web.
Autofill
Inspecione e depure endereços salvos.
Problemas
Encontre e corrija problemas no seu site.
Privacidade e segurança
A página precisa estar totalmente protegida por HTTPS.
Mídia
Confira informações e depure players de mídia por guia do navegador.
Sensores
Emular sensores do dispositivo.
WebAuthn
Emular autenticadores.