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

A guia Elementos > 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 > Principal, agora é possível ocultar as 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 de ativação

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 fica disponível no more_vert menu Ferramentas > Ver rastros não limitados depois que o relatório do 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

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

Bytes usados para armazenamento compartilhado

A seção Aplicativo > Armazenamento > 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, não é mais possível 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. Anteriormente, em vez de somar os dados de uso dos filhos que correspondiam ao filtro, os dados do pai deles 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ências na visão não 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é-visualização 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.
  • Para informar um problema do DevTools, use Mais opções   Mais   > Ajuda > Informar problemas do 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.

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59