Novidades no DevTools, Chrome 127

Sofia Emelianova

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

Para facilitar a depuração do recurso de posicionamento de âncoras, a guia Estilos agora vincula identificadores de âncoras explícitos e âncoras implícitas aos nós.

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

Melhorias no painel "Fontes"

Essa versão traz várias melhorias para o painel Origens.

Melhoria na opção "Nunca pausar aqui"

A opção "Never Pause Here" impede que o Debugger pause na mesma linha repetidamente. Isso facilita o trabalho com pontos de interrupção irrelevantes que são acionados repetidamente. Esta versão aprimora esse recurso, que 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.

Veja o fluxo de trabalho na prática:

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 ao ajuste de rolagem: scrollsnapchange e scrollsnapchanging. Esses eventos são acionados quando você rola o contêiner de rolagem de uma forma que o faz se ajustar a um novo elemento.

Problema do Chromium: 40286359.

Melhorias no painel Network

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

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

O painel Rede recebe predefinições de limitação atualizadas: o novo 4G rápido, o 3G rápido renomeado como 4G lento e o 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 os tempos, como campos personalizados (prefixados por 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 trace de performance. Exemplo:

Problema do Chromium: 40286129.

Destaques diversos

Estas são 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).
  • Pilha de chamadas: o sufixo (async) foi removido das descrições de frame de chamada assíncrona, e o destaque foi alterado de itálico para negrito (343750870).
• Memória: removemos o InternalNodes de tamanho zero desnecessário do Resumo do instantâneo de alocação heap (340200025).
• Rede: correção de um bug que impedia a visualização do conteúdo de resposta de streaming para solicitações que tinham acabado de começar, mas ainda não tinham recebido um evento responseReceived (338340752).
• Desempenho:
  • 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 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 avanço/retorno (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 seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento 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 dos 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 outro assunto relacionado ao DevTools.

• Envie feedback e solicitações de recursos em crbug.com.
• Informe um problema do DevTools usando more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nas Dicas do DevTools.

Novidades no DevTools

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