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 de 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. No Preenchimento automático de perfil, clique em qualquer um dos botões Preencher formulário... e em Enviar. Em seguida, na janela 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 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 formulários e Preenchimento automático.

Otimização de rede aprimorada para WebRTC

Com a nova adição de parâmetros relacionados a pacotes aos perfis de limitação de rede personalizados, agora você pode 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 (percentual), Comprimento da fila de pacotes (número de pacotes) e a flag check_box Reordenação de pacotes.

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

Para limitar uma conexão WebRTC, especifique os parâmetros relacionados ao pacote em um perfil personalizado em settings Settings > Throttling e selecione essa opção no painel Network.

Teste os novos parâmetros nesta página de demonstração. Primeiro, permita que a página use a câmera. Depois, 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 do mouse.

Um grupo de animações marcado com um ícone de mouse do mouse aparece na Visão geral. Agora você pode inspecionar. O grupo mostra valores de pixels 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 aninhamento de CSS é uma maneira de agrupar regras de CSS e tornar tudo menos detalhado e mais estruturado.

O antes e depois de adicionar recuo e colocar estilos aninhados entre chaves.

Problema do Chromium: 40166888.

Painel de desempenho otimizado

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

Ocultar funções e os filhos delas no Flame Chart

Para filtrar o ruído do Flame Chart em Desempenho > Principal, 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 depois da adição de um menu de contexto que permite ocultar funções e os filhos 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 que elas apareçam de novo. Para retornar ao estado inicial do Flame Chart, clique com o botão direito do mouse em uma função e selecione Reset trace.

Setas de iniciadores selecionados para eventos que eles iniciaram

Antes, 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 aquele iniciado, se houver.

O antes e 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 Revelação.

Problemas do Chromium: 325604258, 325024819 e 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 opcional check_box_outline_blank Ativar amostragem de JS. Essa configuração fica desativada por padrão.

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

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

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

O trace estará disponível no menu Ferramentas more_vert > Visualizar rastros não limitados depois que o relatório do Lighthouse for 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 agora mostra uma dica com uma descrição breve e um link para uma descrição mais longa na documentação.

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

Problema do Chromium: 41490331.

Aplicativo > Atualizações de armazenamento

Essa versão tem 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 mostrando quantos bytes são usados para o armazenamento compartilhado.

O armazenamento compartilhado permite que você tenha acesso ilimitado de gravação 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 de teste de descontinuação desta versão, para que você não possa 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 no painel Cobertura:

  • A barra de status agora calcula corretamente as estatísticas de uso de URLs filtrados. Anteriormente, em vez de somar os dados de uso dos filhos correspondentes ao filtro, ela adicionava os dados dos pais.

O antes e depois do cálculo correto das estatísticas de filhos correspondentes.

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

O antes e o depois da mudança da cor do código usado para cinza.

Problema do Chromium: 41494198, 329253687.

O painel "Camadas" pode ter sido descontinuado

O painel Camadas poderá ser descontinuado em breve por ser pouco usado. 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".

Fique à vontade para compartilhar suas ideias e preocupações antes que a equipe tome a decisão final de suspender o uso do painel.

Descontinuação do JavaScript Profiler: fase quatro, final

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

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

Problema do Chromium: 40262073.

Destaques diversos

Estas são 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 visualização da pilha de chamadas na coluna Initiator (327665602).
  • Monitor de desempenho: as caixas de seleção de "Rastrear" agora são as mesmas do restante da interface (1467464).
  • Fontes: foi adicionado o destaque de sintaxe para documentos HTML (327940244).
  • Configurações > Dispositivos: o antigo Galaxy Fold foi substituído pelo novo Galaxy Z Fold 5 mais recente (40113439).
  • Desempenho: agora todos os resultados da pesquisa correspondentes são destacados ao pesquisar com Ctrl/Cmd+F (1523279).
  • Recursos para desenvolvedores: agora também mostra os recursos carregados por meio de extensões de linguagem, como a extensão do Chrome C/C++ DevTools Support (DWARF) (40746829).
  • Desempenho: a pilha de chamadas recortada e o layout incorreto foram 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 oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

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

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59