Novidades do DevTools (Chrome 150)

Matthias Rohmer

Publicado em 30 de junho de 2026

O Chrome 150 oferece depuração de memória aprimorada para agentes no DevTools, melhora a assistência de IA com mais widgets e apresenta recursos de edição completos para regras @container e @function do CSS.

DevTools para agentes

Nas versões recentes até v1.4.0, o Chrome DevTools para agentes expandiu significativamente a automação e os recursos de depuração do navegador.

Os principais recursos e melhorias desde a última versão incluem:

• Pacote de depuração de memória (--experimentalMemory): agora os agentes podem capturar e analisar snapshots de heap V8 diretamente para diagnosticar vazamentos de memória JavaScript e analisar hierarquias de retenção de objetos.
• Gerenciamento de extensões do Chrome (--categoryExtensions): os agentes podem gerenciar ciclos de vida de extensões (instalar, desinstalar, recarregar, listar) e capturar registros do console do service worker em segundo plano para diagnósticos.
• Habilidades de agente agrupadas:o diretório skills/ agora é publicado diretamente na distribuição do pacote npm, permitindo que os agentes clientes do MCP descubram e executem automaticamente fluxos de trabalho especializados de navegação e depuração.
• Otimizações de token e saída:limitar as dimensões da captura de tela na origem reduz o consumo de tokens, e o suporte experimental ao TOON (Token-Oriented Object Notation) otimiza a formatação de dados estruturados.
• Navegação e contexto aprimorados:list_pages agora inclui títulos de página junto com URLs e IDs de destino para melhorar a seleção de contexto com várias guias, enquanto as opções de configuração allowedUrlPattern e blockedUrlPattern aplicam segurança estrita do escopo de navegação.

Para conferir as atualizações mais recentes sobre o DevTools para agentes e contribuir, acesse o repositório do GitHub.

Insights mais detalhados na assistência de IA

O painel Assistência de IA continua evoluindo, fornecendo mais detalhes nos tutoriais do agente. Nove widgets adicionais agora apresentam dados dos painéis Lighthouse, Rede, Fontes e Desempenho. Os widgets ajudam você a entender melhor os dados usados pelo Gemini ao chamar as ferramentas do agente para recuperar eventos de desempenho, conteúdo de recursos, solicitações de rede e muito mais.

Problemas do Chromium: 460763995

Suporte completo à edição de mais regras CSS

A guia Estilos no painel Elementos oferece novos recursos de criação para recursos CSS modernos:

• Edição de regras @container in-place:agora é possível editar diretamente os nomes dos contêineres e as condições de consulta nas regras @container do CSS, permitindo a experimentação perfeita com designs de consulta de contêiner responsivos.
• Edição de regras @function do CSS: adicionamos suporte completo à edição de regras CSS @function personalizadas.
• Edição de regras @counter-style:adicionamos a conclusão de código para propriedades list-style-type, vinculando-as diretamente às definições @counter-style correspondentes.
• Recolher regras que não contribuem:uma nova configuração de preferência permite recolher regras de estilo CSS que não contribuem, mantendo o painel Estilos focado estritamente em estilos ativos.

Problemas do Chromium: 507611251, 41491726, 480080406, 351662727, 514846131

Pontos de interrupção desduplicados e suporte a mapas de origem recursivos em "Fontes"

O painel Fontes apresenta precisão de depuração aprimorada em pipelines de build modernos e complexos:

• Desduplicação de pontos de interrupção lógicos:os marcadores de ponto de interrupção na medianiz agora são desduplicados em pacotes divididos por código e modelos compilados do SSR/cliente usando o mapeamento de local resolvido mais próximo. Isso evita indicadores de ponto de interrupção duplicados ao depurar o código compartilhado em vários blocos ou ambientes.
• **`EvalOrigin` recursivo e mapas de origem aninhados**:o depurador agora oferece suporte a estruturas EvalOrigin recursivas e cadeias de tradução aninhadas em mapas de origem, garantindo rastreamentos de pilha precisos e comportamento de etapa em fluxos de trabalho de compilação de várias etapas.EvalOrigin
• Atalho de teclado "Ir para a linha":adicionamos ALT + G como um atalho de teclado adicional para a navegação "Ir para a linha" no editor, para evitar conflitos com o novo atalho do Gemini no Chrome.
• Formatação de atributos de importação:atualizamos o analisador Acorn subjacente para oferecer suporte à formatação de impressão bonita para a sintaxe de atributos de importação JavaScript padrão.

Problemas do Chromium: 493674242, 485142682, 480172712, 491167992

Proteção de segurança e de origem cruzada no DevTools

Como muitos outros produtos de software, recentemente observamos um aumento nos relatórios de segurança, muitos dos quais foram encontrados com a ajuda da IA. A equipe está constantemente revisando e corrigindo esses problemas para manter o DevTools seguro:

• Proteções de XSS automático para expressões dinâmicas:adicionamos caixas de diálogo de aviso de XSS automático e mecanismos de proteção ao criar expressões dinâmicas no console.
• Listas de permissões de navegação do gravador e verificação de reprodução:o painel Gravador agora aplica listas de permissões de navegação estritas para evitar a navegação em páginas de alta prioridade, além da verificação estrita da origem da extensão nas seções de reprodução.
• Restrições de substituição de rede de extensão:as substituições de rede gerenciadas por extensões agora aplicam estritamente as políticas de host runtime_blocked_hosts.
• Construção segura de @font-face:refatoramos a geração de regras @font-face usando a API CSSStyleSheet e a stringificação de URL segura para evitar a injeção de CSS por URLs de dados.

Outros destaques

Uma coleção de pequenas melhorias e correções de bugs nesta versão:

• Desempenho: corrigimos a inflação do tamanho da transferência TraceTree para solicitações de rede armazenadas em cache , forçando o tamanho da transferência a 0 byte em hits de cache identificados.
• Desempenho: atualizamos os formatadores de desempenho para oferecer suporte a dados de campo opcionais do Chrome UX Report (CrUX) deviceScope.
• Desempenho: ativamos a rolagem horizontal em tabelas de árvore de chamadas para evitar o truncamento de reticências em URLs de arquivos longos.
• Desempenho: corrigimos a nova renderização e a corrupção do estado do DOM na barra lateral "Insights" em vários arquivos de rastreamento.
• Desempenho: migramos o rastreamento de invalidação da linha do tempo e as configurações do modo de depuração de flags experimentais para as configurações padrão do DevTools.
• Rede: revertemos a renomeação incorreta da coluna para restaurar a coluna Tem substituições e corrigimos a lógica de classificação para substituições de cabeçalho e conteúdo.
• Rede: corrigimos o estilo CSS attr() nas barras de cascata de Server-Timing para que as cores geradas por linha sejam renderizadas corretamente.
• Rede: corrigimos a geração do comando Copiar como cURL para cookies sem nome.
• Aplicativo: conectamos itens de armazenamento local e de sessão no painel Aplicativo usando a nova infraestrutura StorageAgent.
• Aplicativo: corrigimos a precedência do status de Carregamentos especulativos para que os URLs que têm sucesso na busca e na pré-renderização sejam exibidos com precisão como "pré-renderizados".
• Aplicativo: mostramos dicas de ferramentas de valor exato de bytes em colunas nas visualizações de snapshot de heap.
• Problemas: mostramos o tipo de problema BackUINavigationWouldSkipAd sempre que a navegação anterior ignorar entradas de anúncios.
• Problemas: adicionamos suporte para mostrar problemas de solicitação de verificação de e-mail (EmailVerificationRequestIssue).
• Lighthouse: adicionamos uma caixa de seleção de categoria Navegação do agente (desativada por padrão) no painel de configuração do Lighthouse e atualizamos o mecanismo do Lighthouse agrupado para a v13.3.0.

Problemas do Chromium: 518021339, 40908621, 517519019, 487755345, 505284391, 465915378, 512908993, 40543651

Melhorias na acessibilidade

O Chrome 150 oferece várias melhorias nos anúncios do leitor de tela, nas estruturas de widgets e na semântica ARIA no DevTools:

• Melhoramos os anúncios do leitor de tela ao selecionar guias e navegar pelas seções na guia "Estilos".
• Adicionamos dicas de ferramentas descritivas aos ícones de fechamento de caixa de diálogo e permitimos detalhes ARIA e atributos de descrição em dicas de ferramentas.
• Aplicamos funções menuitem ARIA estritas em itens de menu de contexto para melhorar a navegação para tecnologias assistivas.

Problemas do Chromium: 510013788