Novidades no DevTools, Chrome 127

Sofia Emelianova

Inspecionar o posicionamento de âncora do CSS no painel "Elementos"

Para ajudar você a depurar o recurso de posicionamento de âncora com mais facilidade, a guia Estilos agora vincula identificadores de âncora explícitos e âncoras implícitas aos respectivos nós.

Além disso, o valor do atributo popovertarget agora está vinculado ao elemento popover no DOM.

Melhorias no painel "Origens"

Esta versão traz várias melhorias ao painel Fontes.

"Nunca pausar aqui" aprimorado

Com a opção "Nunca pausar aqui", você impede que o Debugger pause na mesma linha várias vezes. Isso facilita o trabalho com pontos de interrupção irrelevantes que são acionados repetidamente. Essa versão aprimora esse recurso, que agora funciona para:

• Exceções ou rejeições de promessas de funções integradas.
• Cancelamento de pontos de interrupção de DOM, busca/XHR e violação de CSP.
• Na desmontagem do Wasm.

Confira o fluxo de trabalho em ação:

Problema do Chromium: 40924349.

Novos listeners de eventos de ajuste de rolagem

A lista Fontes > Pontos de interrupção do listener de eventos > Controle recebe dois listeners relacionados a scroll-snap: scrollsnapchange e scrollsnapchanging. Esses eventos são disparados quando você rola o contêiner de rolagem de uma forma que o faz ajustar a um novo elemento.

Problema do Chromium: 40286359.

Melhorias no painel "Rede"

Esta versão traz várias melhorias ao painel Rede.

Predefinições de limitação de rede atualizadas

O painel Rede recebe predefinições de limitação atualizadas: 4G rápido, 3G rápido renomeado como 4G lento e 3G lento renomeado como 3G. Isso se alinha melhor com as predefinições do Lighthouse.

Problema do Chromium: 342406608.

Informações do service worker em campos personalizados do formato HAR.

Ao exportar o registro de rede para um formato HAR, agora é possível ver as informações relacionadas aos service workers, incluindo tempos, como campos personalizados (com prefixo de sublinhados). Por exemplo, você pode encontrar os seguintes campos novos no registro:

...
"response": {
  ...
  "_fetchedViaServiceWorker": true,
  "_responseCacheStorageCacheName": "V1",
  "_serviceWorkerResponseSource": "cache-storage"
}
...
"timings": {
  ...
  "_workerStart": -1,
  "_workerReady": -1,
  "_workerFetchStart": -1,
  "_workerRespondWithSettled": -1
}
...

Problema do Chromium: 342406608.

Enviar e receber eventos do WebSocket no painel "Performance"

Assim como outros eventos do WebSocket, o painel Performance agora captura os eventos Enviar mensagem do WebSocket e Receber mensagem do WebSocket e os mostra no rastreamento de desempenho. Exemplo:

Problema do Chromium: 40286129.

Destaques diversos

Confira algumas correções e melhorias importantes nesta versão:

• Acessibilidade: os leitores de tela agora anunciam o conteúdo das mensagens no Console ao rolar o registro com as teclas de seta para cima e para baixo (344484979).
• Fontes:
  • Página: a opção de menu Salvar como agora salva arquivos de módulo Wasm como binários wasm válidos em vez de texto Base64 (40784130).
  • Call stack: removemos o sufixo (async) das descrições de frames de chamadas assíncronas e mudamos o destaque de itálico para negrito (343750870).
• Memória: removemos o InternalNodes desnecessário de tamanho zero do Resumo do snapshot de heap (340200025).
• Rede: correção de um bug que impedia a prévia do conteúdo de resposta de streaming para solicitações que acabaram de começar, mas ainda não receberam um evento responseReceived (338340752).
• Performance:
  • Estatísticas do seletor: adicionamos uma dica explicativa para a coluna %-of-Slow-Path-Non-Matches (324282954).
  • Modo de configuração de faixas: o botão Concluir a configuração de faixas foi movido para a parte de baixo à direita (345256274).
• Console: foi corrigido um bug que mostrava várias mensagens idênticas do console ao navegar usando o cache de volta/avanço (40894153).
• Configurações: adicionamos ícones de ajuda ao lado de todas as guias.

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 ao DevTools.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert 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.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades do DevTools.