Novidades no DevTools (Chrome 122)

Sofia Emelianova
Sofia Emelianova

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

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

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

Melhorias na rede

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

Motivo da falha na coluna Status

A coluna Status agora sempre mostra o motivo da falha. Anteriormente, era necessário ativar check_box linhas de solicitação grande ou selecionar a solicitação na tabela.

O antes e o depois de mostrar o motivo da falha na coluna "Status".

Problemas do Chromium: 1506760.

Submenu "Copiar" aprimorado

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

O antes e o depois do aprimoramento do submenu "Copiar".

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

Problemas do Chromium: 1267033, 1276452, 798498.

Melhorias no desempenho

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

Navegação estrutural na linha do tempo

Com a Linha do tempo na parte de cima do painel Desempenho, você pode definir a navegação estrutural e navegar entre eles.

Para definir a navegação estrutural, 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árias localizações atuais aninhadas em sequência. Para mudar de nível de zoom, clique na localização atual correspondente na corrente na parte de cima da Linha do tempo. Assista ao próximo vídeo para ver a navegação estrutural em ação.

Problemas do Chromium: 1467739.

Iniciadores de eventos na faixa principal

A página Desempenho > Por padrão, a faixa Principal agora mostra setas conectando iniciadores e os seguintes eventos 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 esse evento no rastreamento e clique nele. Antes, esse recurso era experimental.

Uma seta saindo da solicitação e disparando um callback inativo.

Problemas do Chromium: 1434596.

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

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

O antes e o depois de adicionar um novo menu para selecionar uma instância de VM JavaScript.

Problemas do Chromium: 1511813.

Melhorias nos elementos

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

Além dos dois recursos seguintes, o painel Elementos agora se lembra da última guia aberta, por exemplo, Computed ou Properties.

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

Agora você pode editar os pseudoelementos CSS ::view-transition nos Estilos usando a folha de estilos do inspetor.

Suporte à edição de pseudoelementos de transição de visualização.

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

Problemas do Chromium: 1511233.

Suporte da propriedade align-content para contêineres de bloco.

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

O suporte "antes e depois" de conteúdo alinhado em contêineres de bloco.

Problemas do Chromium: 1500511.

Novo atalho e comando em origens

Agora você pode usar as teclas Cmd (Mac) / Ctrl (Win) + Shift + clicar em um número de linha em Origens para criar um logpoint. Esse atalho complementa as já existentes Cmd (Mac) / Ctrl (Win) + clique para pontos de interrupção condicionais.

O Menu de comando tem o novo comando Reveal Active file in navigator button (Revelar arquivo ativo na barra lateral do navegador), que faz a mesma coisa que a opção correspondente no menu suspenso do Editor.

O novo comando para revelar o arquivo ativo na barra lateral do navegador.

Problemas do Chromium: 1486933, 1467464.

Suporte à postura para dispositivos dobráveis emulados

O Modo dispositivo agora permite definir a postura de um dispositivo dobrável emulado: Contínuo ou Dobrado. A postura contínua se refere a uma a posição e dobrada formam um ângulo entre as seções da tela.

Um menu suspenso com opções de postura.

Além disso, a lista Dispositivos recebe um novo dispositivo dobrável emulado: o 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 no plano de fundo Alterar temas ou selecione uma paleta de cores.

O DevTools corresponde ao tema de cor selecionado em Aparência.

Problemas do Chromium: 1483276.

Avisos de descontinuação gradual de 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 de aviso, clique nela e abra a guia Cookies.

O antes e depois da captura de cookies de terceiros no painel Network.

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

O antes e o depois destacando cookies de terceiros no painel "Aplicativo".

Passe o cursor sobre o ícone de aviso para ver uma dica descrevendo os problemas e clique nele para abrir a guia Issues 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 versão 11.4.0

O painel Lighthouse agora executa o Lighthouse 11.4.0. Veja a lista completa de mudanças. Uma das mudanças importantes é a nova auditoria, que permite detectar se o site ainda usa cookies de terceiros.

Auditoria que detecta cookies de terceiros.

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

Problema do Chromium: 772558.

Acessibilidade

Esta versão tem as seguintes melhorias de acessibilidade:

  • Quando você abre as Configurações Configurações > Experiências, a caixa Pesquisa agora está em foco automaticamente.
  • O botão cancelar Limpar entrada em Rede > Filtro agora é focalizável.
  • A árvore de arquivos em Origens > A opção Página agora é exibida corretamente no modo de alto contraste.
  • Os leitores de tela agora informam corretamente o seguinte:
    • O estado das caixas de seleção em Origens > 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 nas 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

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

  • Animações:
    • Foi corrigido o bug com a renderização de pop-up de captura de tela fora dos limites (1506991).
    • Correção do bug com nós de animação removidos não marcados como removidos (1506561).
  • Rede:
    • Substituições de cabeçalho: foi corrigido um bug com um ícone de ponto roxo falso na guia Headers (1507856).
    • Visualização: foi corrigido um bug com uma decodificação dupla desnecessária (1509336).
    • Correção de um bug que impedia a exibição de solicitações curtas (1509862).
  • Aplicativo > IndexedDB: botões reorganizados na barra de ações para consistência com outros painéis (1393800).
  • Sensores: foi corrigido um bug em que o callback bem-sucedido não estava disponível (1486859).
  • Desempenho:
    • O botão Coletar lixo agora tem um ícone apropriado, "esfregador". em vez de uma "caixa" (1507530).
    • O rastro de desempenho agora retém dados ao navegar para about:blank (1509947).

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.