Novidades do DevTools (Chrome 109)

Jecelyn Yeen

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

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

Abra um fluxo de usuário existente no Gravador. Antes, ao reproduzir 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. Você pode clicar com o botão direito do mouse e removê-lo para fazer 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 *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, você pode atualizar qualquer script existente com facilidade.

Antes, só era possível acessar o menu da etapa usando o 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 nomes de funções reais nas gravações da apresentação

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

Mostrar comparação de nomes de funções antes e depois no painel de desempenho.

Neste exemplo, um arquivo de origem é minificado durante a produção. Por exemplo, a função sayHi é reduzida como n, e a função takeABreak é reduzida como o nesta demo.

Mostrar arquivos antes e depois da minificação.

Anteriormente, quando você gravava um trace no painel Performance, ele mostrava apenas os nomes de função reduzidos. Isso dificultava a depuração.

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

Problemas do Chromium: 1364601, 1364601

Novos atalhos do teclado no console e Painel Origens

É possível alternar entre as guias no painel Fontes usando: No MacOS, Function + Command + seta para cima e para baixo No Windows e no Linux, pressione Control + Page up ou down

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

Além disso, o DevTools agora aceita a seta para a direita para o preenchimento automático apenas no fim da linha. Por exemplo, uma caixa de diálogo de preenchimento automático é exibida quando você está editando algo no meio do código. Quando você pressiona a tecla de seta para a direita, provavelmente quer definir o cursor para a próxima posição, e não para o preenchimento automático. Essa mudança de UX se alinha melhor com seu fluxo de trabalho de criação.

Problema do Chromium: 1167965, 1172535, 1371585. 1369503 (link em inglês)

Depuração de JavaScript aprimorada

Confira algumas melhorias na 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 novo operador. Agora você pode registrar o new.target no Console para verificar o valor dele durante a depuração. Antes, ela retornava erros quando você digitava new.target. Mostrar comparação de antes e depois da depuração de avaliação new.target.
  • Um objeto WeakRef permite manter uma referência fraca a outro objeto sem impedir que ele seja coletado da lixeira. O DevTools agora mostra uma visualização in-line do valor e avalia a referência fraca diretamente no console durante a depuração. Anteriormente, era necessário chamar explicitamente "deref" neles para resolver o problema. Mostra a comparação de antes e depois da avaliação WeakRef durante a depuração.
  • A visualização inline da variável sombreada foi corrigida. Antes, o valor de exibição estava incorreto. Mostra a visualização in-line de comparação antes e depois da variável sombreada.
  • Desofusque nomes de variáveis nas funções Generator e async no painel Escopo do painel Origens.

Problemas do Chromium: 1267690, 1246863 1371322, 1311637

Destaques diversos

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

  • Ofereça mais dicas para propriedades CSS inativas no painel Estilos: altura e largura inline, propriedades flexíveis e grade. (1373597, 1178508, 1178508,1178508).
  • Correção do destaque de sintaxe. Ele não estava funcionando corretamente desde o upgrade recente do editor de código no DevTools. (1290182).
  • Capture eventos de mudança de entrada corretamente após o evento de desfoque no Gravador. (1378488).
  • O script de repetição do Puppeteer na exportação foi atualizado para melhorar a experiência de depuração no Gravador. (1351649).
  • Compatibilidade com gravação e repetiçã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 era compatível com a 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 Breakpoints atual oferece pouco auxílio 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.

Essa reformulação experimental de UX traz estrutura ao painel Breakpoints e permite que os desenvolvedores tenham acesso rápido aos recursos mais usados, como edição e remoção de pontos de interrupção.

Estes são 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, ordenados por número de linha ou coluna. Elas podem ser recolhidas e expandidas.**
  • Novas opções para remover e editar um ponto de interrupção ao passar o cursor sobre ele ou sobre um nome de arquivo no painel Breakpoint.

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

Mostrar o painel de ponto de interrupção antes e depois da reformulação.

Problemas do Chromium: 1346231, 1324904

[Experimental] Impressão automática no local

O painel Fontes agora aplica automaticamente a formatação correta aos arquivos de origem minificados em vigor. Você pode clicar no botão pretty print { } para desfazer essa ação.

Antes, o painel Origens mostrava conteúdo reduzido por padrão. Era necessário clicar no botão de formatação manualmente para formatar o conteúdo. Além disso, o conteúdo bem impresso não foi exibido no mesmo arquivo, mas em outra guia ::formatted.

Mostra um arquivo minificado antes e depois de o Stylus no local automático.

Problema do Chromium: 1164184

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.