Novidades do DevTools e do Chrome 124

Sofia Emelianova
Sofia Emelianova
GitHub

Novo painel de preenchimento automático

Esta versão leva o novo painel de Preenchimento automático para o DevTools. O Preenchimento automático do Chrome é uma forma conveniente de preencher formulários automaticamente em sites com endereços salvos. O novo painel Preenchimento automático permite inspecionar o mapeamento entre os campos do formulário, os valores previstos do 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 do perfil, clique em qualquer um dos botões Preencher formulário... e em Enviar. Em seguida, na janela 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 é aberto automaticamente e mostra campos detectados do formulário, campos inferidos pelo preenchimento automático e valores salvos.

O painel de preenchimento automático.

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

Limitação aprimorada de rede para WebRTC

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

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

O antes e depois de adicionar novas opções relacionadas a pacotes a perfis de limitação personalizados.

Para limitar uma conexão WebRTC, especifique os parâmetros relacionados ao pacote em um perfil personalizado em Configurações Configurações > Limitação e selecione essa opçã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 Ligar.

Problema do Chromium: 41175925.

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

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

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

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

Um grupo de animações marcado com um ícone de mouse do mouse aparece na Visão geral. Agora é possível inspecioná-lo. O grupo mostra valores de pixel em vez de milissegundos na Linha do tempo.

Estilos"" id="nested-css" tabindex="-1">Suporte melhorado ao aninhamento de CSS em Elementos > Estilos

Na seção Elementos > A guia Estilos melhora o suporte ao aninhamento de CSS e agora mostra estilos aninhados com recuo e chaves. O aninhamento de CSS é uma maneira de agrupar regras de CSS e tornar o processo menos detalhado e mais estruturado.

O antes e o depois da adição de recuo e de inclusão de estilos aninhados entre chaves.

Problema do Chromium: 40166888.

Painel de desempenho aprimorado

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

Ocultar funções e os filhos no Flame Chart

Para filtrar o ruído do Flame Chart em Desempenho >, Main, agora é possível ocultar funções irrelevantes e as filhas delas. No Flame Chart, clique com o botão direito do mouse em uma função e escolha uma opção no menu de contexto.

O antes e o depois de adicionar um menu de contexto que permite ocultar funções e as filhas delas.

As funções com filhos ocultos têm um botão arrow_drop_down Menu suspenso à direita. Passe o cursor sobre ela para ver o número de crianças ocultas e clique para exibi-las novamente. Para retornar ao estado inicial do Flame Chart, clique com o botão direito do mouse em uma função e selecione Redefinir rastro.

Setas que vão de iniciadores selecionados para os eventos que eles iniciaram

Anteriormente, quando você selecionava um evento na faixa Principal, a faixa mostrava uma seta do iniciador para o evento selecionado. Agora, a faixa também mostra uma seta do evento selecionado para o que foi iniciado, 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 os 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 versão 11.6.0

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

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

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

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

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

O trace está disponível no menu more_vert Ferramentas > Visualizar rastreamento não limitado depois que o relatório Lighthouse é gerado.

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

Problema do Chromium: 772558.

Dicas para categorias especiais em Memória > Instantâneos de heap

Os snapshots de heap no painel Memory 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 Application > Armazenamento.

Bytes usados para armazenamento compartilhado

A página Application > Armazenamento > A seção Armazenamento compartilhado agora mostra o número de bytes usados por uma origem.

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

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

Problema do Chromium: 324464353.

O SQL da Web foi totalmente descontinuado

O Chrome suspendeu o uso do Web SQL na versão 119 e removeu o token do teste de descontinuação dessa versão. Por isso, você não poderá mais usar o Web SQL.

Depois disso, 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 dos filhos correspondentes ao filtro, os dados dos pais eram somados.

O "antes" e o "depois" calculam corretamente as estatísticas filhas correspondentes.

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

O antes e o depois mudando a cor do código usado para cinza.

Problema do Chromium: 41494198, 329253687.

O painel "Camadas" pode ter sido descontinuado

O painel Camadas pode ser descontinuado em breve devido à baixa utilização. O painel agora mostra um banner de aviso na parte superior.

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

Fique à vontade para compartilhar suas ideias e dúvidas antes que a equipe tome a decisão final de descontinuação do painel.

Descontinuação do JavaScript Profiler: fase 4, 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 Desempenho.

Problema do Chromium: 40262073.

Destaques diversos

Estas são algumas correções e melhorias importantes feitas nesta versão:

  • Rede:
    • Correção de um bug com a análise incorreta de cookies de várias linhas (325410304).
    • A visualização da pilha de chamadas foi corrigida na coluna Iniciador (327665602).
  • Monitor de desempenho: as caixas de seleção "Rastrear" agora são as mesmas do restante da interface (1467464).
  • Fontes: o destaque de sintaxe foi adicionado para documentos HTML (327940244).
  • Configurações > Dispositivos: o Galaxy Fold antigo foi substituído pelo Galaxy Z Fold 5 mais recente (40113439).
  • Desempenho: agora todos os resultados da pesquisa correspondentes são destacados ao pesquisar usando Ctrl/Cmd+F (1523279).
  • Recursos para desenvolvedores: agora também mostra recursos carregados usando extensões de linguagem, como a extensão do Chrome para C/C++ DevTools (DWARF) (40746829).
  • Desempenho: a pilha de chamadas cortada e o layout incorreto eram corrigidos na guia Resumo (325314708).
  • Gaveta: os botões fechar Fechar 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 seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento 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.
  • Informe um problema do DevTools usando Mais opções   Mais > Ajuda > Relate problemas no 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.

Novidades no DevTools

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