Novidades no DevTools, Chrome 127

Sofia Emelianova

Inspecionar o posicionamento da âncora de 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 é vinculado ao elemento popover no DOM.

Melhorias no painel "Origens"

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

"Nunca pause aqui" aprimorado

The "Nunca Pause Aqui" impede que o Debugger pause várias vezes na mesma linha. Isso facilita o trabalho com pontos de interrupção irrelevantes que são acionados repetidamente. Essa versão melhora 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.
• Desmontagem no Wasm.

Confira o fluxo de trabalho em ação:

Problema do Chromium: 40924349.

Novos listeners de eventos de ajuste de rolagem

No menu Fontes > Pontos de interrupção do listener de eventos > A lista 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.

Problema do Chromium: 40286359.

Melhorias no painel Network

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

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

O painel Network 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 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 estes 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:

Problema do Chromium: 40286129.

Destaques diversos

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

• Acessibilidade: 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:
  • Page: a opção de menu Save as agora salva os arquivos do 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).
• Desempenho:
  • 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: foi corrigido um bug que mostrava várias mensagens idênticas ao console ao navegar usando o cache de avanço e retorno (40894153).
• Configurações: adicionamos ícones auxiliares ao lado de todas as guias.

Fazer o download dos 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, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.

• Envie uma sugestão ou feedback pelo site crbug.com.
• Informe um problema do DevTools usando Mais opções   > Ajuda > Relate problemas no DevTools no DevTools.
• Tuíte em @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

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