Novidades no DevTools (Chrome 122)

A coleção oficial de extensões do Gravador já está disponível

A coleção oficial de extensões do Gravador de exportação e repetição já está disponível.

Para abrir a coleção diretamente do Gravador, selecione download Exportar > Receber extensões… na barra de ações na parte de cima do painel Gravador.

Melhorias na rede

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

Motivo da falha na coluna "Status"

A coluna Status agora sempre mostra um motivo de falha. Antes, era preciso ativar check_box Linhas de solicitação grandes ou selecionar a solicitação na tabela.

Problemas do Chromium: 1506760.

Submenu "Copiar" aprimorado

O submenu Copiar de uma solicitação agora está mais organizado.

Além disso, a opção Copiar como cURL agora copia o comando correto para a área de transferência no Windows.

Problemas do Chromium: 1267033, 1276452, 798498.

Melhorias no desempenho

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

Localizações atuais na Linha do tempo

A Linha do tempo na parte de cima do painel Performance agora permite definir rastros de navegação e alternar entre eles.

Para definir um rastreamento, selecione um intervalo na linha do tempo, passe o cursor sobre ele e clique no botão N ms zoom_in. É possível criar vários breadcrumbs aninhados em sequência. Para pular entre os níveis de zoom, clique no rastreador correspondente na cadeia acima da Linha do tempo. Assista o próximo vídeo para ver os rastros de navegação em ação.

Problemas do Chromium: 1467739.

Iniciadores de eventos na faixa principal

Por padrão, a faixa Performance > Principal agora mostra setas conectando iniciadores e os eventos a seguir que eles causaram.

• Invalidação de estilo ou layout -> Recalcular estilos ou Layout
• Solicitar frame de animação -> Frame de animação disparado
• Solicitar callback inativo -> Disparar callback inativo
• Instalar timer -> Timer disparado
• Criar WebSocket -> Enviar... e Receber handshake de WebSocket ou Destruir WebSocket

Para ver as setas, encontre e clique em um evento desse tipo no trace. Antes, esse recurso era um experimento.

Problemas do Chromium: 1434596.

Menu do seletor de instâncias de VM JavaScript para o Node.js DevTools

No painel Performance do Node.js DevTools, agora é possível selecionar uma instância de VM JavaScript no menu suspenso correspondente na barra de ações. Um recurso semelhante estava disponível no Profiler JavaScript, que será descontinuado em breve.

Problemas do Chromium: 1511813.

Melhorias nos elementos

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

Além dos dois recursos a seguir, o painel Elementos agora se lembra da última guia aberta, por exemplo, Calculado ou Propriedades.

O pseudoelemento ::view-transition agora pode ser editado em "Estilos"

Agora é possível editar os pseudoelementos CSS ::view-transition em Estilos usando a folha de estilo do inspetor.

Para mais informações, consulte Transições suaves e simples com a API View Transitions.

Problemas do Chromium: 1511233.

O suporte da propriedade align-content para contêineres de bloqueio

A propriedade align-content agora funciona com qualquer contêiner de bloco, incluindo table-caption e table-cell. Antes, ele funcionava apenas com grade e flex.

Problemas do Chromium: 1500511.

Novo atalho e comando em "Fontes"

Agora você pode pressionar Cmd (Mac) / Ctrl (Win) + Shift + clicar em um número de linha em Fontes para criar um ponto de registro. Esse atalho é uma adição ao Cmd (Mac) / Ctrl (Win) + clique para pontos de interrupção condicionais.

O Menu de comandos recebe o novo comando Revelar arquivo ativo na barra lateral do navegador, que faz o mesmo que a opção correspondente no menu suspenso do Editor.

Problemas do Chromium: 1486933, 1467464.

Suporte a posturas para dispositivos dobráveis emulados

O modo dispositivo agora permite definir a postura de um dispositivo dobrável emulado: Contínua ou Dobrada. A postura contínua se refere a uma posição "plana", e a dobrada forma um ângulo entre as seções da tela.

Além disso, a lista Dispositivos recebe um novo dispositivo dobrável emulado: Asus Zenbook Fold.

Problema do Chromium: 1066842.

Temas dinâmicos

O DevTools agora corresponde automaticamente ao tema de cores do Chrome. Para definir um tema:

1. Abra uma nova guia e clique em Editar Personalizar o Chrome no canto inferior direito.
2. Em "Aparência", escolha um tema em papel de parede Mudar temas ou selecione uma paleta de cores.

Problemas do Chromium: 1483276.

Avisos de descontinuação dos cookies de terceiros nos painéis "Rede" e "Aplicativo"

Os painéis Rede e Aplicativo agora destacam e mostram avisos ao lado dos cookies afetados pelas restrições de terceiros da Proteção antirrastreamento.

Em Rede, encontre uma solicitação com um ícone de aviso, clique nele e abra a guia Cookies.

Em Application, acesse Storage > Cookies e clique em um domínio. Os cookies destacados em amarelo não são armazenados no navegador.

Passe o cursor sobre o ícone de aviso para ver uma dica de ferramenta descrevendo os problemas e clique no ícone para abrir a guia Problemas com mais informações.

Além disso, os cookies na tabela agora são classificados por nome por padrão.

Problemas do Chromium: 1506225, 1503961.

Lighthouse 11.4.0

O painel Lighthouse agora executa o Lighthouse 11.4.0. Confira a lista completa de mudanças. Entre as mudanças notáveis, está a nova auditoria que permite detectar se o site ainda usa cookies de terceiros.

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

Problema do Chromium: 772558.

Acessibilidade

Esta versão tem as seguintes melhorias de acessibilidade:

• Ao abrir configurações Configurações > Experimentos, a caixa Pesquisar agora é focada automaticamente.
• Agora é possível focar no botão cancelar Limpar entrada em Rede > Filtro.
• A árvore de arquivos em Fontes > Página agora é exibida corretamente no modo de alto contraste.
• Os leitores de tela agora anunciam corretamente o seguinte:
  • O estado das caixas de seleção em Fontes > Pontos de interrupção.
  • Informações de posição e índice para uma lista de sugestões.
  • Resultado da ação ao adicionar ou excluir um local em configurações Configurações > Locais.
  • Grupos de regras de exclusão (gerais ou personalizadas) em configurações Configurações > Lista de ignorados.

Problemas do Chromium: 1504938, 1499868, 1512161, 1515224, 1515418, 1516998, 1517015.

Destaques diversos

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

• Animações:
  • Correção do bug com a renderização do popover de captura de tela fora dos limites (1506991).
  • Correção do bug em que nós de animação removidos não eram marcados como removidos (1506561).
• Rede:
  • Substituições de cabeçalho: foi corrigido um bug com um ícone de ponto roxo falso na guia Cabeçalhos (1507856).
  • Prévia: correção de um bug com uma decodificação dupla desnecessária (1509336).
  • Correção de um bug que impedia a exibição de solicitações de Shorts (1509862).
• Application > IndexedDB: botões reorganizados na barra de ações para consistência com outros painéis (1393800).
• Sensores: correção de um bug com um callback de sucesso incorreto de local indisponível (1486859).
• Performance:
  • O botão Coletar lixo agora tem um ícone adequado, "mop" em vez de "bin" (1507530).
  • O rastreamento de performance agora retém dados ao navegar até about:blank (1509947).

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 aos DevTools.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

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