No Chrome 144, a equipe lançou um recurso muito aguardado para o servidor MCP do Chrome DevTools, o novo painel "Condições de solicitação" e melhorias para depuração de fontes e folhas de estilo adotadas.
Esta é a lista de recursos incríveis que lançamos ao longo de 2025. Quer saber se você perdeu algum? Confira os destaques a seguir ou navegue pelas edições anteriores do What's new in DevTools.
Atualizações do servidor MCP do DevTools
Várias correções foram feitas no servidor MCP do DevTools, e a v0.12.1 foi lançada. Esta versão apresenta um novo recurso importante, a conexão automática, que permite reutilizar uma sessão de navegador atual. Com a conexão automática, você pode começar a depurar no Chrome e depois apontar o MCP do DevTools para a mesma instância do Chrome para continuar de onde parou.
Saiba mais sobre a conexão automática para o MCP do DevTools na postagem relacionada do blog. Consulte o changelog público no GitHub para conferir a lista completa de mudanças e correções de bugs.
Limitação de solicitações de rede individuais
O painel "Bloqueio de solicitações de rede" foi renomeado para Condições de solicitação. Além de bloquear solicitações, esse painel agora também permite limitar solicitações individuais.
Abra o painel em ⋮ > Mais ferramentas > Condições de solicitação. Marque a caixa de seleção Ativar bloqueio e limitação para ativar o bloqueio de solicitações. Clique no botão + para adicionar um novo padrão de texto. Clique no ícone para descartar todas as regras.
Saiba como limitar solicitações de rede individuais na documentação atualizada.
Editar regras @font-face e @font-feature-values
Agora, @font-face e @font-feature-values são mostrados no painel Estilos e podem ser editados nele.
Folhas de estilo adotadas no painel "Elementos"
O painel Elementos agora mostra as folhas de estilo adotadas em raízes shadow e de documento. Isso facilita para quem trabalha com folhas de estilo construídas encontrar as que afetam os elementos e depurar estilos, principalmente quando eles não são aplicados inesperadamente.
Novidades do DevTools em 2025
Inovações de IA
Começando com os Insights do console, as inovações de IA já se tornaram uma parte integral do Chrome DevTools. O painel Assistência de IA é o principal hub para depuração com ajuda da IA e reconhecimento de contexto. Com as sugestões de código nos painéis "Console" e "Fontes" e as anotações automáticas do Gemini nos rastreamentos de performance, o DevTools oferece um conjunto abrangente de ferramentas com tecnologia de IA para simplificar seus fluxos de trabalho.
- Correções de estilo de ponta a ponta:peça ao Gemini para corrigir problemas de CSS e, combinado com o Workspaces, salve essas mudanças diretamente nos arquivos de origem no disco.
- Pergunte sobre a performance:agora você pode discutir um rastreamento completo de performance com a assistência de IA, analisar um insight de performance ou usar o Gemini para anotar um rastreamento.
- Depuração visual:o painel de assistência de IA se tornou multimodal, permitindo que você faça upload de imagens ou tire capturas de tela para ajudar o Gemini a entender e depurar falhas visuais.
Desempenho
Redesenhamos o painel Performance para tornar a depuração de performance menos cansativa e mais prática. Por exemplo, um rastreamento gravado agora vem com insights selecionados que ajudam a identificar gargalos e navegar pelos rastreamentos mais rapidamente. Outras melhorias incluem:
- Insights práticos:apresentamos um conjunto robusto de Insights de performance, identificando problemas específicos, como LCP por fase, Causadores de mudança de layout e Latência de solicitação de documento.
- Contexto do mundo real:integramos dados de campo e dados do CrUX diretamente ao painel "Performance", permitindo validar os resultados do laboratório com as experiências de usuários reais.
- Contexto da estrutura:Angular v20 e React v19.2 agora usam a API Extensibility. Entender os gargalos da linha de execução principal fica mais fácil com uma visualização direta da árvore de componentes. Agradecemos nossa parceria com a equipe do Angular e do React.
- Colaboração aprimorada:ficou mais fácil compartilhar rastreamentos com a capacidade de anotar rastreamentos e opções para exportar conteúdo de recursos e mapas de origem, garantindo que um colega ou você no futuro tenha todo o contexto necessário.
Plataforma da Web
O DevTools acompanhou a evolução da plataforma da Web, adicionando ferramentas dedicadas às especificações mais recentes do CSS e melhorando a experiência do desenvolvedor com recursos estabelecidos.
Adicionamos rastreamento detalhado para cadeias de variáveis CSS complexas, disponibilidade de linha de base para dicas de ferramentas de propriedades e, recentemente, introduzimos suporte de depuração para animações de entrada complexas usando a regra @starting-style e um editor visual para o novo layout display: masonry.
Baixar os canais de visualização
Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.
Entre em contato com a equipe do Chrome DevTools
Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada aos DevTools.
- Envie feedback e solicitações de recursos para crbug.com.
- Relate um problema do DevTools usando Mais opções > Ajuda > Relatar um problema do DevTools.
- Envie um tweet para @ChromeDevTools.
- Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.