Novidades do DevTools (Chrome 109)

Jecelyn Yeen

Gravador: opções de copiar como para etapas, repetição na página, menu de contexto da etapa

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

Abra um fluxo do usuário no Gravador. Antes, quando você repetia o fluxo do usuário, o DevTools sempre iniciava a repetição navegando ou recarregando a página.

Com as atualizações mais recentes, o Gravador mostra a etapa de navegação separadamente. Clique com o botão direito do mouse e remova para fazer a reproduçã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 Gravador em vez de exportar todo o fluxo do usuário. Ele também funciona com extensões. Por exemplo, tente copiar uma etapa como um script de teste do Nightwatch. Com esse recurso, é fácil atualizar qualquer script.

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 desempenho

O painel Performance agora mostra os nomes reais das funções e as fontes 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 nesta demonstração.

Mostrar arquivos antes e depois da minificação.

Antes, ao gravar um rastreamento no painel Performance, ele só mostrava os nomes das funções minimizadas. Isso dificultou a depuração.

Com as mudanças mais recentes, o DevTools agora lê o mapa de origem e mostra os nomes reais das funções e o local de origem.

Problemas do Chromium: 1364601, 1364601

Novos atalhos do teclado no painel "Console" e "Fontes"

Você pode alternar entre as guias no painel Fontes usando: No macOS, Função + Command + Seta para cima e para baixo No Windows e no Linux, Control + Page Up ou Page Down

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, digite window. em Console e use esses atalhos para navegar.

Além disso, as DevTools agora aceitam Seta para a direita para preenchimento automático apenas no fim da linha. Por exemplo, uma caixa de diálogo de preenchimento automático aparece quando você está editando algo no meio do código. Ao pressionar a tecla Seta para a direita, provavelmente você quer definir o cursor para a próxima posição em vez de usar o preenchimento automático. Essa mudança na experiência do usuário se alinha melhor ao seu fluxo de trabalho de criação.

Problemas do Chromium: 1167965, 1172535, 1371585. 1369503

Depuração de JavaScript aprimorada

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

  • new.target é uma metapropriedade que permite detectar se uma função ou um construtor foi chamado usando o novo operador. Agora é possível registrar new.target no Console para verificar o valor dele durante a depuração. Antes, isso retornava erros quando você inseria new.target. Mostra a comparação de antes e depois da depuração da avaliação de new.target.
  • Um objeto WeakRef permite manter uma referência fraca a outro objeto sem impedir que ele seja coletado como lixo. Agora, o DevTools mostra uma prévia inline do valor e avalia a referência fraca diretamente no console durante a depuração. Antes, era necessário chamar explicitamente "deref" para resolver isso. Mostrar a comparação de antes e depois da avaliação de WeakRef durante a depuração.
  • Correção da prévia inline para variável sombreada. Antes, o valor de exibição estava incorreto. Mostrar prévia inline da comparação de antes e depois para variável com sombra.
  • Remova a ofuscação dos nomes de variáveis nas funções Generator e async no painel Escopo do painel Fontes.

Problemas do Chromium: 1267690, 1246863 1371322, 1311637

Destaques diversos

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

  • Suporte a mais dicas para propriedades CSS inativas no painel Estilos: altura e largura inline, propriedades flex e grid. (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, link em inglês)
  • Capture eventos de mudança de entrada corretamente após o evento onblur 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)
  • Corrigimos a análise de nomes de variáveis CSS especiais em var(). Antes, o DevTools não oferecia suporte à análise de variáveis com caracteres de escape, como var(--fo\ o). , (1378992)

[Experimental] UX aprimorada no gerenciamento de pontos de interrupção

O painel Pontos de interrupção 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 no menu de contexto.

Essa reformulação experimental da UX traz estrutura ao painel Pontos de interrupção e permite que os desenvolvedores tenham acesso rápido a recursos usados com frequência, como edição e remoção de pontos de interrupção.

Confira alguns destaques:

  • As duas opções de pausa estão no painel Pontos de interrupção. Eles têm rótulos de texto explícitos que tornam as opções autoexplicativas.
  • Os pontos de interrupção são agrupados por arquivo e ordenados por número de linha ou coluna. É possível recolher e expandir essas seções.**
  • 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.

Mostre o painel "Breakpoint" antes e depois da reformulação.

Problemas do Chromium: 1346231, 1324904

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

O painel Fontes agora aplica estilos de formatação automaticamente a arquivos de origem minificados no lugar. Clique no botão impressão formatada { } para desfazer.

Antes, o painel Fontes mostrava conteúdo minimizado por padrão. Era necessário clicar manualmente no botão de impressão bonita para formatar o conteúdo. Além disso, o conteúdo formatado não era mostrado no mesmo arquivo, mas em outra guia ::formatted.

Mostra um arquivo minificado antes e depois da formatação automática no local.

Problema do Chromium: 1164184

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

Novidades no DevTools

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