Novidades do DevTools (Chrome 109)

Jecelyn Yeen

Gravador: opção "Copiar como" para etapas, repetição na página e menu de contexto da etapa

Novas opções de cópia no painel Gravador.

Abra um fluxo de usuário no gravador. Anteriormente, quando você repetia o fluxo de usuários, o DevTools sempre iniciava a repetição navegando para ou atualizando a página.

Com as atualizações mais recentes, o gravador mostra a etapa de navegação separadamente. Você pode clicar com o botão direito do mouse e remover para realizar a repetição na página.

Além disso, você pode clicar com o botão direito do mouse em uma etapa e copiá-la para a área de transferência no painel *Recorder em vez de exportar todo o fluxo de usuários. Ele também funciona com extensões. Por exemplo, tente copiar uma etapa como um script do Nightwatch Test. Com esse recurso, você pode atualizar qualquer script com facilidade.

Antes, só era possível acessar o menu de etapas pelo botão de três pontos. Agora você pode clicar com o botão direito do mouse em qualquer lugar da etapa para acessar o menu.

Problemas do Chromium: 1322313, 1351649, 1322313, 1339767

Mostrar os nomes reais das funções nas gravações de performance

O painel Performance agora mostra os nomes das funções reais e as origens delas no rastreamento, se houver um mapa de origem.

Mostrar a comparação de antes e depois dos nomes de função no painel "Performance".

Neste exemplo, um arquivo de origem é minimizado durante a produção. Por exemplo, a função sayHi é minimizada como n, e a função takeABreak é minimizada como o neste demonstrativo.

Mostrar arquivos antes e depois da minificação.

Antes, quando você gravava um rastro no painel Performance, ele só mostrava os nomes das funções minificadas. Isso dificultou a depuração.

Com as mudanças mais recentes, o DevTools agora lê o mapa de origem e mostra os nomes de função e a localização da fonte.

Problemas do Chromium: 1364601, 1364601

Novos atalhos de teclado no painel "Console e fontes"

É possível alternar entre as guias no painel Origens usando: No macOS, Função + Comando + seta para cima e para baixo No Windows e no Linux, Controle + Page Up ou para baixo

Além disso, você pode navegar pelas sugestões de preenchimento automático com Ctrl + N e Ctrl + P no MacOS, semelhante ao Emacs. Por exemplo, você pode digitar window. no Console e usar esses atalhos para navegar.

Além disso, as DevTools agora aceitam seta para a direita para preenchimento automático apenas no final da linha. Por exemplo, uma caixa de diálogo de preenchimento automático aparece quando você está editando algo no meio do código. Quando você pressiona a tecla Seta para a direita, provavelmente quer definir o cursor para a próxima posição em vez de usar o preenchimento automático. Essa mudança na UX está mais alinhada com seu fluxo de criação.

Problema do Chromium: 1167965, 1172535, 1371585. 1369503

Melhoria na depuração de JavaScript

Confira algumas melhorias de depuração de JavaScript nesta versão:

  • new.target é uma metapropriedade que permite detectar se uma função ou um construtor foi chamado usando o operador new. Agora é possível registrar new.target no Console para verificar o valor dele durante a depuração. Antes, erros eram retornados quando você digitava new.target. Mostre a comparação antes e depois da depuração da avaliação new.target.
  • Um objeto WeakRef permite manter uma referência fraca a outro objeto, sem impedir que ele seja coletado. Agora, as DevTools mostram uma visualização inline do valor e avaliam a referência fraca diretamente no console durante a depuração. Antes, era necessário chamar explicitamente "deref" neles para resolver o problema. Mostrar a comparação antes e depois da avaliação WeakRef durante a depuração.
  • Correção da visualização inline para variáveis com sombra. Antes, o valor de exibição estava incorreto. Mostrar a visualização inline de comparação antes e depois para a variável sombreada.
  • Deobfuscar nomes de variáveis nas funções Generator e async no painel Escopo no painel Origens.

Problemas do Chromium: 1267690, 1246863 1371322, 1311637

Destaques diversos

Confira algumas correções importantes desta versão:

  • Suporte a mais dicas para propriedades CSS inativas no painel Styles: altura e largura inline, propriedades flex e grade. (1373597, 1178508, 1178508,1178508).
  • Destaque de sintaxe corrigido. Ele não estava funcionando corretamente desde a recente atualização do editor de código no DevTools. (1290182).
  • Captura de eventos de mudança de entrada corretamente após o evento de desfoque no Recorder. (1378488).
  • Atualizamos o script de repetição do Puppeteer na exportação para melhorar a experiência de depuração no Gravador. (1351649).
  • Suporte para gravação e reprodução no Gravador para depuração remota. (1185727).
  • Correção da análise de nomes de variáveis CSS especiais em var(). Antes, as Ferramentas do desenvolvedor não ofereciam suporte à análise de variáveis com caracteres de escape, como var(--fo\ o). , (1378992).

[Experimental] Melhoria na UX ao gerenciar pontos de interrupção

O painel Breakpoints atual oferece pouca ajuda visual para supervisionar todos os pontos de interrupção. Além disso, as ações usadas com frequência ficam ocultas atrás do menu de contexto.

Esse redesign experimental de UX traz estrutura ao painel Breakpoints e permite que os desenvolvedores tenham acesso rápido a recursos usados com frequência, como editar e remover pontos de interrupção.

Confira alguns destaques:

  • As duas opções de pausa estão no painel Breakpoints. Eles têm rótulos de texto explícitos que explicam as opções.
  • Os pontos de interrupção são agrupados por arquivo e ordenados por número de linha ou coluna. Você pode fechar e abrir as janelas.**
  • Novas opções para remover e editar um ponto de interrupção ao passar o cursor sobre ele ou um nome de arquivo no painel Ponto de interrupção.

Leia as mudanças completas na nossa RFC (fechada) e deixe seu feedback aqui.

Mostrar o painel de ponto de interrupção antes e depois do redesign.

Problemas do Chromium: 1346231, 1324904

[Experimental] Formatação automática no local

O painel Origens agora mostra automaticamente os arquivos de origem minificados no lugar. Clique no botão pretty print { } para desfazer a ação.

Antes, o painel Origens mostrava conteúdo minificado por padrão. Você teve que clicar no botão de impressão bonita manualmente para formatar o conteúdo. Além disso, o conteúdo impresso não foi mostrado no mesmo arquivo, mas em outra guia ::formatted.

Mostre um arquivo minificado antes e depois da impressão automática no local.

Problema do Chromium: 1164184

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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

Novidades no DevTools

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