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.
Saiba como as inovações de IA no DevTools permitem que você faça mais, mais rápido. Use DevTools para agentes para conectar o poder do DevTools aos seus agentes de programação favoritos.
Inovações de IA
Deixe o Gemini ajudar você a analisar e melhorar o estilo, a rede, as fontes e a performance do seu site. Receba ajuda com erros do console e sugestões de código nos painéis "Console" e "Fontes".
DevTools para agentes
Ofereça aos seus agentes de programação as mesmas ferramentas confiáveis que você usa para inspecionar a atividade de rede, gravar rastros e solucionar problemas de aplicativos da Web no fluxo de trabalho de IA.
Conecte o servidor MCP do Chrome DevTools (Protocolo de Contexto de Modelo) à ferramenta de sua preferência: Antigravity, Claude Code, Cline, Copilot e muito mais.
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 a rede
Analise e substitua as solicitações e respostas de rede em tempo real.
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.
Emular experiências do usuário com agentes de programação
Com o Chrome DevTools para agentes, seu agente pode verificar layouts responsivos, testar APIs com reconhecimento de local e simular várias velocidades de CPU ou de rede.
Automatizar auditorias do Lighthouse com agentes de programação
O Lighthouse no Chrome DevTools para agentes permite que seu agente de programação avalie a qualidade do site realizando verificações de integridade em tempo real para acessibilidade, SEO, práticas recomendadas e navegação agêntica.
Pitstop de otimização de performance
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.
Pixel Pirate
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.
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.
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.
Mais ferramentas
Conheça todos os outros recursos e capacidades do DevTools.