Esta página foi traduzida pela API Cloud Translation.

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.

O antes e o depois de vincular âncoras explícitas e implícitas.

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

O antes e o depois de vincular popovertarget ao elemento pop-over.

Problema do Chromium: 289900232, 330306231.

Melhorias no painel "Origens"

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

"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. 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

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

O antes e depois de atualizar as predefinições de limitação de rede.

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:

O evento "Receber mensagem WebSocket" capturado no rastreamento 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:
- 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: ícones auxiliares foram adicionados ao lado de todas as guias (330213867).

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é-visualização 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.
Para informar um problema do DevTools, use Mais opções > Ajuda > Informar problemas do 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.