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 do Gravador.

Abra um fluxo de usuário existente no Gravador. Anteriormente, 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 executar a repetição na página.

Você também 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. Ela também funciona com extensões. Por exemplo, tente copiar uma etapa como um script Teste noturno. Com esse recurso, é possível atualizar qualquer script existente com facilidade.

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

Problemas do Chromium: 1322313, 1351649, 1322313 e 1339767

Mostrar os nomes reais das funções nas gravações da apresentação

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

A comparação "Mostrar antes e depois" dos nomes das funções é exibida no painel "Desempenho".

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

Mostra os arquivos antes e depois da minificação.

Antes, quando você gravava um trace no painel Desempenho, ele mostrava apenas os nomes das funções minimizadas. Isso dificultava 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 a localização da origem.

Problemas do Chromium: 1364601 e 1364601

Novos atalhos do teclado no painel Console e fontes

É possível alternar entre as guias no painel Sources usando: No MacOS, Function + Command + seta para cima e para baixo No Windows e 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, semelhante ao Emacs. Por exemplo, você pode digitar window. no Console e usar estes atalhos para navegar.

Além disso, o DevTools agora aceita a seta para a direita para preenchimento automático apenas no final da linha. Por exemplo, uma caixa de diálogo de preenchimento automático mostra quando você está editando algo no meio do código. Ao pressionar a seta para a direita, você provavelmente quer colocar o cursor na próxima posição em vez de usar o preenchimento automático. Essa mudança de UX se alinha melhor ao seu fluxo de trabalho de criação.

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

Depuração de JavaScript aprimorada

Estas são 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 new.target no Console para verificar o valor durante a depuração. Anteriormente, ela retornava erros quando você digitava new.target. Mostra a 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 esse objeto seja coletado da lixeira. O DevTools agora mostra uma visualização inline para o 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 de WeakRef durante a depuração.
  • Correção da visualização inline para variável sombreada. Anteriormente, o valor de exibição estava incorreto. Mostra a comparação inline de antes e depois da variável oculta.
  • Desofusque nomes de variáveis nas funções Generator e async no painel Escopo do painel Origens.

Problemas do Chromium: 1267690, 1246863 1371322 e 1311637

Destaques diversos

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

  • Ofereça suporte a mais dicas para propriedades CSS inativas no painel Estilos (altura e largura in-line), flexibilidade e grade. (1373597, 1178508, 1178508,1178508).
  • O destaque de sintaxe foi corrigido. Ele não estava funcionando corretamente desde o recente upgrade do editor de código no DevTools. (1290182).
  • Capture eventos de mudança de entrada corretamente depois do evento de desfoque no Gravador. (1378488).
  • Atualize o script de repetição do Puppeteer na exportação para melhorar a experiência de depuração no Recorder. (1351649).
  • Ofereça suporte à gravação e repetição no Gravador para depuração remota. (1185727).
  • Correção da 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] Melhoria na UX no gerenciamento de pontos de interrupção

O painel Breakpoints atual oferece pouca ajuda visual na supervisão de 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 da 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 Breakpoints. 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 o nome de um arquivo no painel Breakpoint.

Leia as alterações completas no RFC (fechado) e deixe seu feedback aqui.

Mostrar o painel Breakpoint antes e depois do novo design.

Problemas do Chromium: 1346231, 1324904

[Experimental] Impressão nítida automática no local

O painel Origens agora imprime automaticamente os arquivos de origem minimizados no lugar. Você pode clicar no botão Impressão Em alta { } para desfazer essa ação.

Antes, o painel Origens mostrava o conteúdo reduzido 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 com estilo de formatação não era exibido no mesmo arquivo, mas em outra guia ::formatted.

Mostra um arquivo minimizado 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 seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

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

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59