O que há de novo no DevTools (Chrome 109)

Published on

Translated to: English

Tradução realizada por Lucas Santos. Revisão por Alvaro Camillo Neto.

Interessado em ajudar a melhorar o DevTools? Inscreva-se para participar da Pesquisa de usuário do Google.

Gravador: opção "copiar como" para etapas, reprodução na página, no menu de contexto da etapa

Novas opções de cópia na página do gravador.

Abra um fluxo de usuário existente no Gravador. Anteriormente, quando você repetia o fluxo do usuário, o DevTools sempre iniciava a reproduçã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 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. Funciona com extensões também. Por exemplo, tente copiar uma etapa como um script de testes do Nightwatch. Com esse recurso, você pode atualizar qualquer script existente com facilidade.

Anteriormente, você podia acessar o menu de etapas apenas por meio do botão dos 3 pontos. Agora você pode clicar com o botão direito do mouse em qualquer lugar na etapa para acessar o menu.

Issues relacionadas: 1322313, 1351649, 1322313, 1339767

Mostra os nomes das funções reais nas gravações da performance

O painel Desempenho agora mostra os nomes das funções reais e suas origens no rastreamento, se houver um sourcemap.

Mostrar a comparação antes e depois da exibição dos nomes das funções no painel Desempenho.

Neste exemplo, um código fonte é reduzido durante a produção. Por exemplo, a função sayHi é minificada como n, e a função takeABreak é minificada como o nesta demonstração.

Mostrar arquivos antes e depois da minificação.

Anteriormente, quando você gravava um trace no painel Desempenho, o trace mostrava apenas os nomes de função reduzidos. Isso dificultava o debug.

Com as alterações mais recentes, o DevTools agora lê o sourcemap e mostra os nomes reais das funções e a localização da original.

Issues relacionadas: 1364601, 1364601

Novos atalhos de teclado no painel Console e fontes

Você pode alternar entre as guias no painel Fontes usando: No MacOS, Function + Command + Seta para cima e Seta para baixo No Windows e 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](https:// www.gnu.org/software/emacs/). Por exemplo, você pode digitar window. no Console e usar esses atalhos para navegar.

Além disso, o DevTools agora aceita Seta para a direita para preenchimento automático apenas no final 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 Seta para a direita, provavelmente deseja definir o cursor para a próxima posição em vez do preenchimento automático. Essa mudança de UX se alinha melhor com seu fluxo de trabalho.

Issues relacionadas: 1167965, 1172535, 1371585. 1369503

Depuração de JavaScript aprimorada

Estas são algumas melhorias de depuração de JavaScript nesta versão:

  • new.target é uma meta-propriedade que permite detectar se uma função ou construtor foi chamado usando o operador new. Agora você pode registrar new.target no Console para verificar seu valor durante a depuração. Anteriormente, ele retornaria erros quando você digitasse new.target. Mostrar antes e depois da comparação da depuração com new.target.
  • Um objeto WeakRef permite que você mantenha uma referência fraca a outro objeto, sem impedir que esse objeto seja coletado pelo garbage collector. O DevTools agora mostra uma visualização em linha para o valor e realiza um eval na referência fraca diretamente no console durante a depuração. Anteriormente, você tinha que chamar explicitamente “deref” para resolvê-lo. Mostrar antes e depois da comparação da avaliação WeakRef durante a depuração.
  • Visualização inline corrigida para variável sombreada. Anteriormente, o valor de exibição estava incorreto. Mostrar antes e depois da visualização em linha de comparação para a variável sombreada.
  • Desofuscação de nomes de variáveis nas funções Generator e async no painel Escopo no painel Fontes.

Issues relacionadas: 1267690, 1246863 1371322, 1311637

Outros destaques

Estas são algumas correções dignas de nota nesta versão:

  • Suporte a mais dicas para propriedades CSS inativas no painel Estilos - altura e largura inline, propriedades flex e de grid. (1373597, 1178508, 1178508,1178508)
  • Correção do realce da sintaxe. Não estava funcionando corretamente desde a recente atualização do editor de código no DevTools. (1290182)
  • Capture eventos de alteração de entrada corretamente após um evento de desfoque no Gravador. (1378488)
  • Possibilidade de atualizar o script de repetição do Puppeteer na exportação para uma melhor experiência de depuração no Gravador. (1351649)
  • Suporte para gravação e reprodução no Gravador para depuração remota. (1185727)
  • Corrigida a análise de nomes de variáveis CSS especiais em var(). Anteriormente, o DevTools não suportava a análise de variáveis com caracteres de escape como var(--fo\ o). , (1378992)

[Experimental] UX aprimorado no gerenciamento de breakpoints

Para habilitar o experimento, marque Enable re-designed Breakpoint Sidebar Pane in the Sources Panel em Configurações > Experimentos.

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

Este redesenho experimental de UX visa trazer estrutura para o painel Breakpoints e permitir que os desenvolvedores tenham acesso rápido aos recursos comumente usados, em particular edição e remoção de pontos de interrupção.

Estes são alguns destaques:

  • Ambas as opções de pausa estão no painel Breakpoints e rotuladas com texto para torná-lo mais auto-explicativo.
  • Os breakpoints são agrupados por arquivo, ordenados por número de linha/coluna e recolhíveis.**
  • Novas opções para remover e editar o breakpoint ao passar o mouse sobre um deles ou no nome do arquivo no painel Breakpoint.

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

Mostrar o painel Breakpoint antes e depois da reformulação.

Issues relacionadas: 1346231, 1324904

[Experimental] Formatação automática (pretty print) no mesmo painel

Para ativar o experimento, marque Automatically pretty print in the Sources em Configurações > Experimentos.

O painel Fontes agora mostra automaticamente arquivos de origem reduzidos no próprio painel. Você pode clicar no botão pretty print { } para fazer isso.

Anteriormente, o painel Fontes mostrava conteúdo minificado por padrão. Devs precisam clicar no botão de formatação manualmente para formatar o conteúdo. Além disso, o conteúdo formatado não é exibido no mesmo arquivo, mas em outra guia ::formatted.

Mostra um arquivo minificado antes e depois da formatação automática na mesma aba.

Issues relacionadas: 1164184

Baixe os canais de prévia

Considere usar o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de prévia fornecem acesso aos recursos do DevTools mais recentes, testam nas últimas APIs da plataforma web lançadas e encontram problemas em seu site antes que seus usuários o façam!

Entre em contato com a equipe Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças nesse artigo ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou comentários para nós pelo crbug.com.
  • Relate um problema de DevTools usando o More options   More   > Help > Report a DevTools issues em DevTools.
  • Mande um tweet para @ChromeDevTools.
  • Deixe comentários em nossos vídeos "What's new in DevTools" no YouTube.

Mais recursos do DevTools

Consulte a versão em inglês do What's New In DevTools para uma lista completa dos recursos lançados. Abaixo estão alguns conteúdos que foram traduzidos para o português.

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.