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ências de rede agora mostra uma lista de origens pré-conectadas usadas ou não usadas e candidatos de pré-conexão, se houver.

As dicas de pré-conexão permitem que seu site estabeleça conexões antecipadas com origens importantes de terceiros e melhore a velocidade de carregamento da página.

Para mais informações, consulte Pré-conectar às origens necessárias.

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

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

Redirecionamentos no resumo das solicitações de rede

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

Problema do Chromium: 402353313.

Ruído reduzido no trace de performance

O painel Performance agora não mostra eventos da categoria compile do motor JavaScript v8. Antes, esses eventos causavam muita sobrecarga e ruído desnecessários, principalmente o evento compile code.

Se você notar que alguns eventos importantes estão faltando, deixe seu feedback em crbug.com/414330508.

O recurso "Desativar exemplos de JavaScript" foi descontinuado

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

Problema do Chromium: 414734883.

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

O painel Sensores agora 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"

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

Depurar valores CSS complexos com mais facilidade

Para ajudar a depurar valores CSS complexos, a guia Elements > Styles agora mostra uma dica de ferramenta ao passar o cursor:

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

A dica mostra cadeias de definição em várias linhas, uma para cada definição. Você pode expandir cálculos complexos e passar o cursor sobre valores para destacar e rastrear o valor calculado de volta à expressão inicial.

Problema do Chromium: 396080529.

Suporte a @function em Elementos > Estilos

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

Melhorias no painel de rede

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

Sockets diretos em apps isolados da Web

No painel Rede, agora é possível monitorar o tráfego de aplicativos da Web isolados (IAIs) usando TCPSocket, UDPSocket (no modo de vinculação) 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 (AIWS, na sigla em inglês) oferecem um modelo de segurança de alta confiança para aplicativos da Web. Para mais informações, consulte Primeiros passos com 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 desta versão:

• Aplicativo > Armazenamento: a opção descontinuada do Web SQL foi removida (crbug.com/412707590).
• Elementos:
  • Ativado por padrão o realce de problemas com elementos e atributos no DOM.
  • Estilo: foi adicionado o valor clip às opções de preenchimento automático overflow.
• Rede: o cabeçalho HTTP Referrer-Policy foi removido da opção Copiar como fetch 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: os avisos de "tarefa longa" foram removidos 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, independentemente de acessarem ou não o armazenamento durante um redirecionamento.
• Acessibilidade. Os seguintes elementos em Elementos > Estilos agora podem ser focados pelo teclado:
  • Amostras de sombra (crbug.com/401213105).
  • Links de nome de posicionamento de âncora (crbug.com/401213107).
  • Botões do editor de flex e grade (crbug.com/401213522).
  • Comprimentos (crbug.com/401211976).
  • Links de URL (crbug.com/401213104).
  • Nomes e valores de propriedades (crbug.com/417458979).

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 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 outra coisa relacionada ao DevTools.

• Envie feedback e solicitações de recursos para 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 Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

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