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 os 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 finalização da compra de 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 Performance.

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

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

Painel do gravador

Problema do Chromium: 1257499

Atualizar a lista de dispositivos no modo "Dispositivo"

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

Atualizar a lista de dispositivos no modo "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 destaques de sintaxe. No painel Elements, 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 a encontrar o nome da propriedade que você está procurando.

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

Problema do Chromium: 1215072

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

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

Número da coluna no erro de saída

Problema do Chromium: 1073064

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

Agora, suas configurações do DevTools são sincronizadas entre dispositivos por padrão quando você ativa a sincronização do perfil do Chrome. É possível mudar as configurações de sincronização das Ferramentas do desenvolvedor em Configurações > Sincronização > Ativar a sincronização de configurações.

Configurações de sincronização das DevTools

Essa nova configuração facilita o trabalho 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. Saiba mais sobre o recurso de sincronização na personalização do DevTools.

configurações de aparência

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

Problema do Chromium: 1245541

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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 no DevTools.