Novidades do DevTools (Chrome 97)

Jecelyn Yeen

Recurso de visualização: novo painel do Gravador

Use o novo painel Gravador para gravar, repetir e medir fluxos de usuários.

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

Por exemplo, você pode gravar o processo de pagamento do café com este aplicativo de demonstração de pedidos de café. Depois de adicionar um café e preencher os detalhes de 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.

Acesse a documentação do painel Gravador para saber mais com o tutorial explicativo.

O painel Gravador é um recurso de pré-lançamento. Nossa equipe ainda está trabalhando nisso e quer seu feedback para fazer mais melhorias.

Painel do gravador

Problema do Chromium: 1257499

Atualizar a lista de dispositivos no modo de dispositivo

Ao ativar a barra de ferramentas de dispositivos, mais dispositivos modernos são adicionados à lista. Selecione um dispositivo para simular as dimensões dele.

Atualizar a lista de dispositivos no modo de dispositivo

Problema do Chromium: 1223525

Preenchimento automático com a opção "Editar como HTML"

A interface Editar como HTML agora oferece suporte a preenchimento automático e destaque de sintaxe. No painel Elementos, clique com o botão direito do mouse em um elemento e selecione Editar como HTML. Tente digitar uma propriedade DOM (por exemplo, id, aria). O preenchimento automático vai ajudar você a encontrar o nome da propriedade que está procurando.

Preenchimento automático com a opção "Editar como HTML"

Problema do Chromium: 1215072

Experiência aprimorada de depuração de código

Agora, os números das colunas estão incluídos no erro de saída no console. Ter acesso fácil ao número da coluna é essencial para depurar, principalmente com JavaScript minimizado.

Número da coluna no erro de saída

Problema do Chromium: 1073064

[Experimental] Sincronização das configurações do DevTools entre dispositivos

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

Configurações de sincronização das DevTools

Com essa nova configuração, fica mais fácil trabalhar em vários dispositivos. Por exemplo, as seguintes configurações de aparência 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. Saiba mais sobre o recurso de sincronização na personalização do DevTools.

configurações de aparência

No momento, esse recurso é experimental, e a equipe ainda está trabalhando nele. Se quiser enviar feedback, clique aqui.

Problema do Chromium: 1245541

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada ao DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades do DevTools.