Novidades no DevTools, Chrome 127

Sofia Emelianova
Sofia Emelianova

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.

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 Origens

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

"Nunca pause aqui" aprimorado

A opção "Nunca pausar aqui" permite evitar que o Depurador pause na mesma linha várias 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.
  • "Cancelando" 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 Sources > Event Listener Breakpoints > Control tem dois listeners relacionados a scroll-Snap: scrollsnapchange e scrollsnapchanging. Esses eventos são acionados quando você rola o contêiner de uma forma que faz com que ele se encaixe 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 para o painel Network.

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

O painel Network recebe predefinições de limitação atualizadas: as novas predefinições de 4G rápido, 3G rápido foi renomeada como 4G lento e 3G lento renomeada 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 service worker em campos personalizados do formato HAR

Ao exportar o registro de rede para o formato HAR, agora você pode ver as informações relacionadas aos service workers, incluindo os horários, como campos personalizados (prefixados por sublinhados). 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 WebSocket no painel "Desempenho"

Assim como outros eventos WebSocket, o painel Desempenho agora captura eventos Enviar mensagem do WebSocket e Receber mensagem do WebSocket e os exibe no trace de desempenho. Exemplo:

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

Problema do Chromium: 40286129.

Destaques diversos

Estas são algumas correções e melhorias importantes feitas nesta versão:

  • Acessibilidade: agora os leitores de tela agora anunciam o conteúdo das mensagens no Console ao rolar o registro usando as setas 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 frame de chamada assíncrona e o destaque mudou de itálico para negrito (343750870).
  • Memória: foi removido o InternalNodes desnecessário de tamanho zero do Resumo do snapshot de heap (340200025).
  • Rede: foi corrigido um bug que impedia a visualização do conteúdo de resposta de streaming para solicitações que acabaram de ser iniciadas, 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 da faixa: 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.