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

Published on Updated on

Translated to: English, Español, 한국어, 中文, Pусский, 日本語

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

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

Prévia de funcionalidade: Novo painel de Gravação

Use o novo painel Gravação para registrar, reproduzir e medir os fluxos do usuário.

Abra o painel Gravação. Siga as instruções na tela para iniciar uma nova gravação.

Por exemplo, vamos usar o aplicativo demonstração de pedido de café, você pode registrar o processo de checkout do café. Depois de adicionar um café e preencher os detalhes do pagamento, você pode encerrar a gravação, repetir o processo ou clicar no botão Medir desempenho para medir o fluxo do usuário no painel Desempenho.

Veja na documentação do painel Gravação para aprender mais com o tutorial passo a passo!

O painel Gravação é uma prévia de funcionalidade. Nossa equipe ainda está trabalhando ativamente nisso e queremos ler seus comentários para mais melhorias.

Painel de Gravação

Issue Relacionada: 1257499

Atualização da lista de dispositivos no modo de Dispositivo

Habilitando a barra de ferramentas de dispositivos, dispositivos mais modernos foram adicionados à lista de dispositivos. Selecione um dispositivo para simular suas dimensões.

Atualização da lista de dispositivos no modo de Dispositivo

Issue Relacionada: 1223525

Preenchimento automático do Editar como HTML

A interface de usuário Editar como HTML agora oferece suporte para preenchimento automático e destaques de sintaxe. No painel Elementos, clique com o botão direito em um elemento e selecione Editar como HTML. Tente digitar uma propriedade DOM (por exemplo, id,aria), o preenchimento automático deve ajudá-lo a encontrar o nome da propriedade que você está procurando. Preenchimento automático do Editar como HTML

Issue Relacionada: 1215072

Melhoria na experiência de Debug

Os números das colunas agora estão incluídos na saída de erro no console. Ter acesso fácil ao número da coluna é essencial para depuração, especialmente com JavaScript minificado.

Número da coluna na saída de erro

Issue Relacionada: 1073064

[Experimental] Sincronizando as configurações do DevTools entre dispositivos

Suas configurações do DevTools agora são sincronizadas entre os dispositivos por padrão quando você ativa a sincronização do perfil do Chrome. Você pode alterar as configurações de sincronização do DevTools em Configurações> Sincronizar> Ativar sincronização de configurações. Sincronização de perfil do Chrome

Configurações de sincronização do DevTools

Esta nova configuração torna mais fácil para você trabalhar em vários dispositivos. Por exemplo, as configurações de aparência a seguir são sincronizadas para que você tenha uma experiência consistente em todos os dispositivos e não precise redefinir as mesmas configurações novamente.

Configurações de aparência

No entanto, nem todas as configurações são sincronizadas. Por exemplo, as configurações de dock não são sincronizadas porque os desenvolvedores têm preferências de dock diferentes ao depurar em sites diferentes.

dock

Este recurso é experimental no momento, a equipe ainda está trabalhando ativamente nele. Se você tiver algum feedback, compartilhe conosco aqui

Issue Relacionada: 1245541

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 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

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