Novidades do DevTools e do Chrome 124

Sofia Emelianova
Sofia Emelianova
GitHub

Novo painel de preenchimento automático

Esta versão traz o novo painel Preenchimento automático para o DevTools. O preenchimento automático do Chrome é uma maneira conveniente de preencher automaticamente formulários em sites com endereços salvos. Com o novo painel Preenchimento automático, você pode inspecionar o mapeamento entre os campos do formulário, os valores previstos de preenchimento automático e os dados salvos.

Teste o novo painel nesta página de demonstração com dados de teste:

  1. Em Preenchimento automático de perfil, clique em um dos botões Preencher formulário ..., clique em Enviar e, na caixa de diálogo Salvar endereço?, clique em Salvar e volte para a página com o formulário.
  2. Abra o DevTools e acione um evento de preenchimento automático: selecione um campo de formulário e escolha o endereço na lista suspensa.

O painel Preenchimento automático abre automaticamente e mostra os campos de formulário detectados, os campos inferidos pelo preenchimento automático e os valores salvos.

O painel de preenchimento automático.

Para saber mais, consulte Aprender sobre o Formulários e Preenchimento automático.

Limitação de rede aprimorada para WebRTC

Com a nova adição de parâmetros relacionados a pacotes aos perfis personalizados de limitação de rede, agora é possível limitar seus aplicativos WebRTC diretamente nas DevTools. Isso é útil para testar sua implementação de comunicação em tempo real sem precisar usar software de terceiros.

Os novos parâmetros são: Perda de pacote (porcentagem), Comprimento da fila de pacotes (número de pacotes) e a flag Reordenação de pacotes.

Antes e depois de adicionar novas opções relacionadas a pacotes aos perfis de limitação personalizada.

Para limitar uma conexão WebRTC, especifique os parâmetros relacionados a pacotes em um perfil personalizado em Configurações > Limitação e selecione-o no painel Rede.

Teste os novos parâmetros nesta página de demonstração. Primeiro, permita que a página use a câmera. Em seguida, no painel Rede, selecione o perfil personalizado que você configurou e, de volta à página, clique em Iniciar e Chamar.

Problema do Chromium: 41175925.

Compatibilidade com animações de rolagem no painel "Animações"

O painel Animações agora permite inspecionar animações de rolagem.

Teste esse recurso nesta página de demonstração. Abra o painel Animações e recarregue a página para capturar animações controladas por rolagem.

Um grupo de animações controladas por rolagem marcadas com um ícone de mouse.

Um grupo de animação marcado com um ícone de aparece na Visão geral. Agora você pode inspecionar. O grupo mostra valores de pixel em vez de milissegundos na Linha do tempo.

Estilos"" id="nested-css" tabindex="-1">Melhoria no suporte ao aninhamento de CSS em Elementos > Estilos

A guia Elementos > Estilos melhora o suporte ao aninhamento de CSS e agora mostra estilos aninhados com recuo e entre chaves. O encadeamento de CSS é uma maneira de agrupar regras de CSS e tornar as coisas menos detalhadas e mais estruturadas.

Antes e depois de adicionar indentação e colocar estilos aninhados entre chaves.

Problema do Chromium: 40166888.

Painel de desempenho aprimorado

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

Ocultar funções e filhos no gráfico de chamas

Para filtrar o ruído do gráfico em degradê em Performance > Principal, agora é possível ocultar funções irrelevantes e os filhos delas. No gráfico de chamas, clique com o botão direito do mouse em uma função e escolha uma opção no menu de contexto.

Antes e depois de adicionar um menu de contexto que permite ocultar funções e seus filhos.

As funções com filhos ocultos têm um botão Suspenso à direita. Passe o cursor sobre ele para ver o número de crianças ocultas e clique para mostrar de novo. Para voltar ao estado inicial do gráfico de chamas, clique com o botão direito do mouse em uma função e selecione Redefinir rastreamento.

Setas dos iniciadores selecionados para os eventos que eles iniciaram

Antes, quando você selecionava um evento na faixa Principal, ela mostrava uma seta do iniciador até o evento selecionado. Agora, a faixa também mostra uma seta do evento selecionado para aquele que ele iniciou, se houver.

O antes e o depois mostrando setas de eventos selecionados para iniciados e links nomeados em vez de "Revelar".

Além disso, todos os iniciadores agora têm campos Iniciador para na guia Resumo, e os campos Iniciador para e Iniciado por têm links nomeados em vez de Revelar.

Problemas do Chromium: 325604258, 325024819, 326055289.

Lighthouse 11.6.0

O painel Lighthouse agora executa o Lighthouse 11.6.0. Confira a lista completa de mudanças.

Entre as mudanças notáveis, está a nova configuração de ativação Ativar amostragem de JS. Essa configuração fica desativada por padrão.

Antes e depois de adicionar uma configuração de amostragem de JS de ativação.

Ativar a amostragem de JS adiciona pilhas de chamadas detalhadas do JavaScript ao rastreamento de desempenho, mas pode diminuir a velocidade da geração de relatórios.

Rastreamento de desempenho sem (à esquerda) e com (à direita) amostragem de JS.

O rastreamento está disponível em Menu Ferramentas > Ver rastreamento sem limitação depois que o relatório do Lighthouse é gerado.

Para aprender o básico sobre como usar o painel Lighthouse nas DevTools, consulte Lighthouse: otimizar a velocidade do site.

Problema do Chromium: 772558.

Dicas para categorias especiais em "Memória" > "Snapshots de heap"

Os snapshots de heap no painel Memória têm grupos especiais de objetos que não são baseados em construtores. Ao passar o cursor sobre esses objetos, o painel Memória mostra uma dica com uma breve descrição e um link para uma descrição mais longa na documentação.

O antes e o depois mostrando uma dica descritiva para grupos especiais de objetos.

Problema do Chromium: 41490331.

Aplicativo > Atualizações de armazenamento

Esta versão traz algumas atualizações em Aplicativo > Armazenamento.

Bytes usados para armazenamento compartilhado

A seção Application > Storage > Shared storage agora mostra o número de bytes usados por uma origem.

O antes e o depois mostrando quantos bytes são usados para o armazenamento compartilhado.

O armazenamento compartilhado permite acesso de gravação ilimitado e entre sites com acesso de leitura que preserva a privacidade.

Problema do Chromium: 324464353.

O Web SQL foi totalmente descontinuado

O Chrome descontinuou o Web SQL na versão 119 e removeu o token de teste de descontinuação nessa versão. Portanto, não é mais possível usar o Web SQL.

Seguindo o mesmo caminho, o DevTools removeu a seção Web SQL do painel Application.

Problema do Chromium: 327254049.

Melhorias no painel de cobertura

Esta versão traz algumas atualizações para o painel Cobertura:

  • Agora, a barra de status calcula corretamente as estatísticas de uso dos URLs filtrados. Antes, em vez de somar os dados de uso dos filhos que correspondiam ao filtro, ela somava os dados dos pais.

O antes e o depois calculando corretamente as estatísticas de filhos correspondentes.

  • A cor do código usado agora é cinza em vez de verde para melhorar a visibilidade, especialmente para deficiência de visão de cores sem verde.

Antes e depois de mudar a cor do código usado para cinza.

Problema do Chromium: 41494198, 329253687.

O painel "Camadas" poderá ser descontinuado

O painel Camadas poderá ser descontinuado em breve devido à baixa adesão. O painel agora mostra um banner de aviso na parte de cima.

O banner de aviso anunciando a possível descontinuação na parte de cima do painel "Camadas".

Compartilhe suas ideias e preocupações antes que a equipe tome a decisão final de descontinuar o painel.

Descontinuação do criador de perfil do JavaScript: fase quatro, final

Nesta versão, o painel JS Profiler foi totalmente descontinuado e não pode mais ser reativado.

Para criar um perfil de desempenho da CPU, use o painel Performance.

Problema do Chromium: 40262073.

Destaques diversos

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

  • Rede:
    • Correção de um bug com a análise incorreta de cookies de várias linhas (325410304).
    • Correção da prévia da pilha de chamadas na coluna Iniciador (327665602).
  • Monitor de desempenho: as caixas de seleção de rastreamento agora são iguais ao restante da interface (1467464).
  • Fontes: adicionamos o destaque de sintaxe para documentos XHTML (327940244).
  • Configurações > Dispositivos: o Galaxy Fold antigo foi substituído pelo Galaxy Z Fold 5 mais recente (40113439).
  • Performance: todos os resultados da pesquisa correspondentes agora são destacados ao pesquisar com Ctrl/Cmd+F (1523279).
  • Recursos para desenvolvedores: agora também mostra recursos carregados por extensões de linguagem, como a extensão do Chrome C/C++ DevTools Support (DWARF) (40746829).
  • Performance: foi corrigida a pilha de chamadas cortada e o layout ruim na guia Resumo (325314708).
  • Gaveta: agora é possível focar nos botões Fechar, para que os painéis possam ser fechados usando o teclado.

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.

Novidades no DevTools

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