Novidades do DevTools (Chrome 152)

Matthias Rohmer

Publicado em: 25 de agosto de 2026

O Chrome 152 traz melhorias significativas para a depuração de rede com reenvio de solicitações e inspeção de carga binária, adornos de elementos personalizados e aninhamento de CSS aprimorado em "Elementos", Core Web Vitals para navegações suaves em "Métricas de desempenho em tempo real", exportação de tabelas estruturadas no console e melhorias para o servidor MCP do DevTools.

DevTools para agentes

A versão mais recente, v1.7.0, do servidor MCP do Chrome DevTools cria os recursos de depuração de memória introduzidos anteriormente para agentes de programação, como Antigravity, Claude, Codex e outros:

• Detalhes do objeto de instantâneo de alocação heap (get_heapsnapshot_object_details): inspecione propriedades detalhadas de objetos JavaScript, nomes de classes e caminhos de retenção de raiz de GC diretamente dos instantâneos de alocação heap.
• Filtragem de contexto nativo do V8:filtre objetos de instantâneo de alocação heap por contexto de execução nativo e inspecione contextos nativos em resumos de instantâneos.
• Melhorias na estabilidade e no ciclo de vida do daemon:adicionamos retenção limitada de solicitações de rede por navegação, validação de ID da sessão, avisos de incompatibilidade de versão da CLI para o daemon e encerramento normal do worker na remoção do contexto.

Para saber mais e começar, acesse o repositório do DevTools para agentes no GitHub.

Rede: editar e reenviar solicitações, insights de pré-carregamento e decodificação de payload binário

• Reenviar solicitações de busca e XHR:o antigo item do menu de contexto "Repetir XHR" agora é Reenviar. Agora ele oferece suporte a todas as solicitações de rede buscáveis, convertendo solicitações padrão em chamadas fetch() e preservando a fidelidade total de repetição junto com XHR. As solicitações também rastreiam e mostram o contexto de execução e o originador do console.
• Coluna "Pré-carregado" e "Copiar como elemento de pré-carregamento": uma nova coluna dedicada Pré-carregado mostra se uma solicitação de rede foi iniciada usando o pré-carregamento especulativo. Você também pode clicar com o botão direito do mouse em qualquer solicitação e selecionar Copiar como elemento de pré-carregamento para gerar uma tag <link rel="preload"> pronta para ser inserida no seu HTML. Agora, as dicas antecipadas são categorizadas na coluna Iniciador.
• Visualizador binário para payloads de solicitação:a guia Payload agora inclui opções de método de decodificação (Base64, Hex e UTF-8) para payloads de solicitação binários e compactados, espelhando a guia "Resposta".
• Coluna "Número da solicitação fixada":a coluna "Solicitação #" agora está fixada na primeira posição da grade de dados de rede para facilitar a referência de solicitações.
• Filtragem de host do mesmo site:a pesquisa de domínios, nomes de host ou portas (por exemplo, localhost ou example.com) na barra de filtro de rede agora filtra com precisão as solicitações do mesmo site.
• Decodificação padrão de parâmetros de consulta:os parâmetros de consulta e de formulário na guia "Payload" agora são decodificados automaticamente para todas as solicitações.

Problemas do Chromium: 40726969, 41299075, 40138847, 40222701, 525848667, 507077182, 498482622, 520437951, 40267477

Elementos: adornos de elementos personalizados, interações aninhadas do seletor pai de CSS e seleção de pseudoelementos $0

A inspeção e a criação de componentes da Web e CSS moderno são mais rápidas e intuitivas no painel Elementos:

• Badge de adorno de elemento personalizado:elementos HTML personalizados (identificados por tags com hífens ou atributos is="..." para elementos integrados personalizados) agora mostram um badge de adorno custom-element no contorno da árvore do DOM.
• Interações e especificidade do seletor pai de CSS aninhado:ao passar o cursor sobre seletores pai em regras de CSS aninhadas e regras aninhadas herdadas, os elementos correspondentes na página são destacados e respondem à filtragem da guia "Estilos". Adicionamos popovers de dicas de especificidade para regras @nested-declarations.
• Seleção de pseudoelementos via $0:selecionar pseudoelementos como ::before ou ::after na árvore do DOM de elementos agora os vincula diretamente à variável de console $0 para inspeção imediata de JavaScript.
• Preenchimento automático para tipos text-wrap e <image>:o painel "Estilos" agora sugere todos os valores de palavra-chave para text-wrap (wrap, nowrap, balance, pretty, stable) e preenche automaticamente as propriedades CSS que aceitam tipos de dados <image>.
• Percepção da barra de rolagem do modelo de caixa:o diagrama de métricas do modelo de caixa agora calcula e renderiza com precisão as dimensões da caixa de conteúdo quando os elementos têm barras de rolagem visíveis.

Problemas do Chromium: 367440148, 535517817, 535522242, 535523039, 537724428, 399305533, 334984154, 383355294, 326260752, 389342065

Performance: métricas de navegação suave em métricas ativas e predefinições de captura de tela personalizadas

• Suporte a métricas em tempo real para navegações suaves:agora, a visualização de métricas em tempo real captura e informa as Core Web Vitals (como LCP e INP) para navegações suaves do lado do cliente em aplicativos de página única por padrão, com tecnologia de uma atualização para web-vitals v6.0.0.
• Predefinições personalizadas de captura de tela:expõe predefinições configuráveis de tamanho e limite de contagem de frames de captura de tela para rastreamento de CDP no painel "Performance" para personalizar a fidelidade da gravação visual dentro dos orçamentos de memória.
• console.profileEnd() revelador de rastreamento:chamar console.profileEnd() no código ou console agora abre e revela automaticamente o rastreamento gravado no painel "Performance".
• Resumo de rastreamentos personalizados da API de extensibilidade:agora, os resumos de rastreamento de performance processam e apresentam grupos de rastreamento personalizados registrados usando a API de extensibilidade.

Problemas do Chromium: 514721939, 490140054, 536954453, 535506117

Console: exportar tabelas como Markdown ou CSV e proteção contra efeitos colaterais

• Copiar tabelas do console como Markdown ou CSV:as tabelas registradas usando console.table() agora podem ser copiadas diretamente para a área de transferência como tabelas Markdown formatadas ou dados CSV no menu de contexto.
• Proteção contra avaliação de efeitos colaterais:a avaliação por passar o cursor do depurador agora protege contra expressões que contêm new, literais de modelo marcados, import() dinâmicos e operadores delete, evitando mutações acidentais de estado durante a pausa.

Problemas do Chromium: 40924951, 40133606

Outros destaques

Uma coleção de melhorias notáveis em outros subsistemas do DevTools:

• Fontes: a Abertura rápida agora prioriza arquivos do espaço de trabalho local com um grande aumento de pontuação, fazendo com que os arquivos do espaço de trabalho apareçam no topo acima dos recursos de rede. (problema do Chromium: 40260136)
• Memória: a visualização "Resumo do instantâneo de heap" agora mostra a contagem total de objetos junto com tamanhos superficiais agregados para tipos selecionados e inclui filtros de contexto de execução nativa. (Problema do Chromium: 497855658)
• Aplicativo: o painel Anúncios realocou a alternância Destacar anúncios diretamente no painel, adicionou IDs de elementos iframe de anúncio clicáveis para revelar frames na hierarquia e introduziu uma tabela de detalhamento de métricas por frame. (problema do Chromium: 514957134)
• Aplicativo: redesenhamos a seção Limpar dados do site no painel "Armazenamento" em um grupo unificado e consolidado (problema do Chromium: 375867286) e resolvemos entradas duplicadas do Cache Storage após restaurações do cache de avanço e retorno (problema do Chromium: 484693244).
• Extensões: os métodos assíncronos em chrome.devtools.panels agora retornam de forma nativa promessas de JavaScript quando chamados sem um callback. (problema do Chromium: 496604551)
• Configurações: divida as predefinições de limitação de rede padrão e as configurações personalizadas de limitação em seções separadas. (Problema do Chromium: 342409451)
• Lighthouse: o módulo agrupado do Lighthouse foi atualizado para a versão 13.4.1. (Problema do Chromium: 40543651)
• Problemas: o DevTools mostra um aviso quando uma imagem que usa loading="lazy" não tem dimensões width ou height explícitas.
• Modo dispositivo: simplificamos o menu de nível de zoom com uma opção unificada Ajustar à janela e desativamos o botão Mostrar frame do dispositivo quando os gráficos de frame não estão disponíveis.

Melhorias na acessibilidade

O Chrome 152 inclui as seguintes melhorias de acessibilidade:

• Elementos e acessibilidade: foram adicionadas opções de menu de contexto para alternar facilmente entre a árvore DOM de elementos e a visualização em árvore de acessibilidade, além de "Rolar para a visualização" para nós de acessibilidade. (Problemas do Chromium: 417929842)
• Acessibilidade: adicionamos suporte para copiar nós e subárvores da árvore de acessibilidade como texto simples usando o menu de contexto. (Problema do Chromium: 417929842)
• Elementos: corrigimos as cores de destaque da pesquisa de baixo contraste no painel "Elementos" ao executar no modo escuro. (problema do Chromium: 491718898)
• Navegação: ao separar o DevTools em uma janela separada ou encaixar de volta na guia, o foco não é mais forçado para o botão do menu principal.
• Configurações: adicionamos um contexto acessível descritivo aos botões "Mostrar mais" e "Mostrar menos" nas configurações de IA.