Novidades no DevTools, Chrome 127

Sofia Emelianova
Sofia Emelianova
GitHub

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

As ancoragens explícitas e implícitas de antes e depois.

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

O antes e o depois de vincular o popovertarget ao elemento popover.

Melhorias no painel de origens

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

Melhoria da opção "Nunca pausar aqui"

A opção "Nunca pausar aqui" permite que você impeça que o Desenvolvedor pause na mesma linha repetidas vezes. Isso facilita o trabalho com pontos de interrupção irrelevantes que são acionados repetidamente. Esta versão aprimora esse recurso e agora funciona para:

  • Exceções ou rejeições de promessas de funções integradas.
  • Pontos de interrupção de violação de DOM, fetch/XHR e CSP "Cancelar".
  • 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 Sources > Event Listener Breakpoints > Control recebe dois listeners relacionados a scroll-snap: scrollsnapchange e scrollsnapchanging. Esses eventos são acionados quando você rola o contêiner de rolagem de uma maneira que o fixa em um novo elemento.

O antes e o depois de adicionar listeners de eventos relacionados ao ajuste de rolagem.

Problema do Chromium: 40286359.

Melhorias no painel de rede

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

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

O painel Network recebe predefinições de limitação atualizadas: Fast 4G, Fast 3G renomeados para Slow 4G e Slow 3G renomeados para 3G. Isso se alinha melhor com as predefinições do Lighthouse.

As predefinições de limitação de rede antes e depois da atualização.

Problema do Chromium: 342406608.

Informações do worker do serviço em campos personalizados do formato HAR

Ao exportar o registro de rede em um formato HAR, agora é possível conferir as informações relacionadas a service workers, incluindo tempos, como campos personalizados (com sublinhados no início). Por exemplo, você pode encontrar os seguintes novos campos 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 rastro de performance. Exemplo:

O evento "Receive WebSocket Message" capturado no rastro de performance.

Problema do Chromium: 40286129.

Destaques diversos

Confira algumas correções e melhorias importantes desta 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).
    • Pilha de chamadas: o sufixo (async) foi removido das descrições de frames de chamada assíncrona, e o destaque delas foi alterado de itálico para negrito (343750870).
  • Memória: removemos o InternalNodes desnecessário de tamanho zero do resumo do snapshot do heap (340200025).
  • Rede: correção de um bug que impedia a visualização do conteúdo de resposta de streaming para solicitações que começaram, mas ainda não receberam um evento responseReceived (338340752).
  • Performance:
    • Estatísticas do seletor: adicionamos uma dica de ferramenta explicativa para a coluna %-of-Slow-Path-Non-Matches (324282954).
    • Modo de configuração de faixas: o botão Concluir a configuração das faixas foi movido para o canto inferior direito (345256274).
  • Console: correção de um bug que mostrava várias mensagens idênticas no console ao navegar usando o cache de ida/volta (40894153).
  • Configurações: adicionamos ícones de ajuda ao lado de todas as guias.

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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.

Novidades no DevTools

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