Novidades do Chrome 138 para as DevTools

Melhorias no painel de desempenho

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

Origens pré-conectadas no insight "Árvore de dependência da rede"

O insight Performance > Insights > Árvore de dependência de rede agora mostra uma lista de origens pré-conectadas usadas ou não usadas e candidatos à pré-conexão, se houver.

Com as dicas de pré-conexão, seu site pode estabelecer conexões antecipadas com origens importantes de terceiros e melhorar a velocidade de carregamento da página.

Para mais informações, consulte Pré-conexão com origens necessárias.

Tempos de resposta e redirecionamento do servidor no insight "Latência de solicitação de documento"

O insight Latência de solicitação de documento em Performance > Insights agora mostra o tempo de resposta do servidor e, se houver, o número de redirecionamentos e o tempo de redirecionamento.

Redirecionamentos no resumo de solicitações de rede

O painel Performance agora mostra URLs de redirecionamento no Resumo de solicitações de rede e nas dicas.

Problema do Chromium: 402353313.

Redução de ruído no rastreamento de performance

O painel Performance não vai mais mostrar eventos da categoria compile do mecanismo JavaScript v8. Antes, esses eventos causavam muito sobrecarga e ruído desnecessários, principalmente o evento compile code.

Se você notar que alguns eventos importantes para você não estão mais disponíveis, deixe seu feedback em crbug.com/414330508.

Descontinuação de "Desativar exemplos JavaScript"

A opção Desativar exemplos de JavaScript em Performance > Configurações de captura foi descontinuada e removida devido à utilidade rara e ao baixo uso.

Problema do Chromium: 414734883.

Parâmetro de precisão de geolocalização em sensores

Agora, o painel Sensores permite definir a precisão na emulação de geolocalização. Assim, você pode testar o processamento de diferentes níveis de precisão do GPS.

Problema do Chromium: 40074843.

Melhorias no painel "Elementos"

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

Depure valores CSS complexos com mais facilidade

Para ajudar você a depurar valores CSS complexos, a guia Elementos > Estilos agora mostra em uma dica ao passar o cursor:

• A cadeia completa de definição de variáveis CSS, para que você não precise clicar em vários links.
• Uma avaliação detalhada de cálculos complexos de CSS para que você possa identificar bugs com mais eficiência e entender melhor como um valor é calculado.

A dica de ferramenta mostra cadeias de definição em várias linhas, uma para cada definição. É possível expandir cálculos complexos e passar o cursor sobre os valores para destacar e rastrear o valor calculado até a expressão inicial.

Problema do Chromium: 396080529.

Compatibilidade com @function em "Elementos" > "Estilos"

Em preparação para a compatibilidade com @function no Chrome, a guia Elementos > Estilos agora vincula os nomes das suas funções personalizadas às definições delas em uma seção dedicada.

Melhorias no painel "Rede"

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

has-request-header filtro

O painel Rede agora é compatível com o filtro has-request-header, que permite filtrar por um nome de cabeçalho de solicitação específico.

Problema do Chromium: 397481040.

API Direct Sockets em Apps Isolados da Web

No painel Rede, agora é possível monitorar o tráfego de apps da Web isolados (IWAs, na sigla em inglês) usando TCPSocket, UDPSocket (no modo vinculado) e UDPSocket (no modo conectado).

Para fazer isso, selecione uma conexão directscoket ao lado das solicitações regulares na tabela e, na guia Mensagens, selecione uma mensagem.

Os apps isolados da Web (IWAs) oferecem um modelo de segurança de alta confiança para aplicativos da Web. Para mais informações, consulte Como começar a usar apps da Web isolados e confira o app de demonstração que implementa a API Direct Sockets.

Destaques diversos

Confira algumas correções e melhorias importantes nesta versão:

• Application > Storage: removemos a opção descontinuada do Web SQL (crbug.com/412707590).
• Elementos:
  • Ativamos por padrão o destaque de problemas com elementos e atributos no DOM.
  • Estilos: adicionamos o valor clip às opções de preenchimento automático overflow.
• Rede: removemos o cabeçalho HTTP Referrer-Policy da opção Copiar como busca porque ele é um cabeçalho de resposta para controlar o comportamento do navegador, não uma instrução do lado do cliente (crbug.com/413904896).
• Performance: removemos os avisos de "tarefa longa" das linhas de execução de worker porque elas não bloqueiam as linhas de execução principais (crbug.com/40248589).
• Problemas. Agora os relatórios:
  • Se algum recurso suspeito de rastrear usuários for bloqueado.
  • Mitigações de rastreio por redirecionamento, independente de acessarem o armazenamento durante um redirecionamento ou não.
• Acessibilidade. Os seguintes elementos em Elementos > Estilos agora podem ser focados com o teclado:
  • Mostruários de cores de sombra (crbug.com/401213105).
  • Links de nomes de posicionamento de âncora (crbug.com/401213107).
  • Botões do editor de flexbox e grade (crbug.com/401213522).
  • Comprimentos (crbug.com/401211976).
  • Links de URL (crbug.com/401213104).
  • Nomes e valores de propriedades (crbug.com/417458979).

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

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.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

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