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 as DevTools. O preenchimento automático do Chrome é uma maneira conveniente de preencher formulários em sites com endereços salvos. O novo painel Preenchimento automático permite inspecionar o mapeamento entre os campos do formulário, os valores de preenchimento automático previstos e os dados salvos.

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

  1. Em Preenchimento automático do perfil, clique em qualquer um dos botões Preencher formulário, clique em Enviar e, na janela de diálogo Salvar endereço?, clique em Salvar e volte para a página com o formulário.
  2. Abra as Ferramentas do desenvolvedor 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 é aberto automaticamente e mostra os campos de formulário detectados, os campos inferidos pelo preenchimento automático e os valores salvos.

Painel de preenchimento automático.

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

Limitação de rede aprimorada para WebRTC

Com a adição de parâmetros relacionados a pacotes aos perfis de limitação de rede personalizados, agora é possível limitar os aplicativos do WebRTC diretamente no DevTools. Isso é útil para testar a implementação de comunicação em tempo real sem precisar usar softwares 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 redução de velocidade personalizados.

Para limitar uma conexão do 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, na página, clique em Iniciar e Chamar.

Problema do Chromium: 41175925.

Suporte a animações de rolagem no painel "Animações"

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

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

Um grupo de animações movidas 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 a 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 chaves. O anilhamento de CSS é uma maneira de agrupar regras de CSS e tornar as coisas menos detalhadas e mais estruturadas.

O antes e o depois de adicionar recuo e estilos aninhados em chaves.

Problema do Chromium: 40166888.

Painel "Enhanced Performance"

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

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

Para filtrar o ruído do gráfico em Performance > Principal, agora é possível ocultar funções irrelevantes e os filhos delas. No gráfico de chama, 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 filhos delas.

As funções com filhos ocultos têm um botão Drop-down à direita. Passe o cursor sobre ele para conferir o número de crianças ocultas e clique para mostrar novamente. Para retornar ao estado inicial do gráfico de chama, 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, a faixa mostrava uma seta do iniciador até o evento selecionado. Agora, a faixa também mostra uma seta do evento selecionado para o evento que o iniciou, se houver.

O antes e o depois mostrando setas de eventos selecionados para eventos 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. Consulte a lista completa de mudanças.

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

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

Ativar a amostragem de JS adiciona pilhas de chamadas JavaScript detalhadas ao rastro de desempenho, mas pode retardar a geração de relatórios.

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

O rastro está disponível em Menu de ferramentas > Exibir rastro não limitado depois que o relatório do Lighthouse é gerado.

Para aprender os conceitos básicos de uso do painel Lighthouse nas DevTools, consulte Lighthouse: otimizar a velocidade do site.

Problema do Chromium: 772558.

Dicas para categorias especiais em Memória > Snapshots de pilha

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 agora mostra uma dica com uma descrição curta e um link para uma descrição mais longa na documentação.

O antes e 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 para 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.

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

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

Problema do Chromium: 324464353.

O SQL da Web foi totalmente descontinuado

O Chrome desativou o Web SQL na versão 119 e removeu o token de teste de descontinuação nessa versão.

Seguindo o exemplo, 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:

  • A barra de status agora calcula corretamente as estatísticas de uso dos URLs filtrados. Antes, em vez de somar os dados de uso das crianças que correspondiam ao filtro, ela somava os dados da conta principal.

Antes e depois do cálculo correto das estatísticas de crianças 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 cor não verde.

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

Problema do Chromium: 41494198, 329253687.

O painel "Camadas" pode ser descontinuado

O painel Camadas poderá ser descontinuado em breve devido à baixa utilizaçã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.

Suspensão de uso do criador de perfil do JavaScript: fase quatro, final

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

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

Problema do Chromium: 40262073.

Destaques diversos

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

  • Rede:
    • Correção de um bug com a análise incorreta de cookies de várias linhas (325410304).
    • A prévia da pilha de chamadas foi corrigida na coluna Initiator (327665602).
  • Monitoramento de desempenho: as caixas de seleção de rastreamento agora são iguais às do restante da interface (1467464).
  • Origens: foi adicionado 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).
  • Desempenho: todos os resultados de 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 para suporte ao C/C++ (DWARF) (40746829).
  • Performance: foi corrigido o corte da pilha de chamadas e o layout incorreto na guia Summary (325314708).
  • Drawer: os botões Close agora podem ser focados, para que os painéis possam ser fechados usando o teclado.

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

Novidades no DevTools

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