Novidades do DevTools (Chrome 97)

Recurso em pré-lançamento: novo painel do Gravador

Use o novo painel Gravador para gravar, reproduzir 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 finalização da compra de um café com este aplicativo de demonstração de pedido 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 o desempenho para medir o fluxo do usuário no painel Desempenho.

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

O painel Gravador é um recurso de prévia. Nossa equipe ainda está trabalhando nisso e aguardamos seu feedback para fazer outras melhorias.

Painel do Gravador

Problema do Chromium: 1257499

Atualizar lista de dispositivos no Device Mode

Ativando a barra de ferramentas do dispositivo, dispositivos mais modernos foram adicionados à lista. Selecione um dispositivo para simular as dimensões dele.

Atualizar lista de dispositivos no Device Mode

Problema do Chromium: 1223525

Preencher automaticamente com "Editar como HTML"

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

Preencher automaticamente com "Editar como HTML"

Problema do Chromium: 1215072

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

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

Número da coluna no erro de saída

Problema do Chromium: 1073064

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

Suas configurações do DevTools agora são sincronizadas em todos os dispositivos por padrão quando você ativa a sincronização de perfil do Chrome. Mude as configurações de sincronização do DevTools em Configurações > Sincronizar > Ative a sincronização de configurações.

Configurações de sincronização do DevTools

Com essa nova configuração, ficou mais fácil 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. Saiba mais sobre o recurso de sincronização na personalização do DevTools.

configurações de aparência

No momento, o recurso é experimental, e a equipe ainda está trabalhando nisso. Se você tiver algum feedback, compartilhe conosco aqui.

Problema do Chromium: 1245541

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 dão acesso aos recursos mais recentes do DevTools, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.

  • Envie uma sugestão ou feedback pelo site crbug.com.
  • Informe um problema do DevTools usando Mais opções   Mais > Ajuda > Relate problemas no DevTools no DevTools.
  • Tuíte em @ChromeDevTools.
  • Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

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