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 demonstração.

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 painel "Console e origens"

Você pode alternar entre as guias no painel Origens usando: No MacOS, Function + Command + seta para cima e para baixo. No Windows e no Linux, 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. Antes, era necessário chamar "deref" explicitamente 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 a 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é-visualização 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.
  • Para informar um problema do DevTools, use Mais opções   Mais   > Ajuda > Informar problemas do 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59