Novidades do DevTools (Chrome 110)

Jecelyn Yeen

Como limpar o Painel de desempenho ao recarregar

O painel Desempenho agora limpa a captura de tela e o rastreamento quando você clica no botão Iniciar criação de perfil e atualizar a página.

Antes, o painel Desempenho exibia uma linha do tempo com capturas de tela de gravações anteriores. Isso dificultava a visualização de quando a medição real começava. Agora, o painel sempre navega primeiro para a página about:blank para garantir que a gravação comece com um rastro em branco. Isso se alinha ao painel Insights de desempenho, que já fez o mesmo.

Limpando o Painel de desempenho ao recarregar.

Problemas do Chromium: 1101268, 1382044

Atualizações do Gravador

Conferir e destacar o código do fluxo do usuário no Gravador

O Gravador agora oferece a visualização de código de divisão, facilitando a visualização do código de fluxo do usuário. Para acessar a visualização do código, abra um fluxo de usuário e clique em Mostrar código.

O Gravador destaca o código correspondente conforme você passa o cursor sobre cada etapa à esquerda, facilitando o rastreamento do fluxo. É possível alterar o formato do código usando o menu suspenso. Ele permite alternar entre formatos, como o script Teste do Nightwatch.

Visualização de código no Gravador.

Problema do Chromium: 1385489

Personalizar os tipos de seletor de uma gravação

Você pode criar gravações que capturem apenas os tipos de seletor que são importantes para você. Com a nova opção para personalizar tipos de seletor ao criar uma nova gravação, você pode incluir ou excluir seletores como XPath, garantindo a captura apenas dos seletores desejados nos fluxos de usuários.

Nova opção para personalizar os tipos de seletor.

Problema do Chromium: 1384431

Editar o fluxo do usuário durante uma gravação

O Gravador agora permite a edição durante a gravação, oferecendo a flexibilidade de fazer mudanças em tempo real. Não é mais necessário encerrar a gravação para fazer ajustes.

Edição durante o registro do fluxo do usuário.

Problema do Chromium: 1381971

Premiação automática no local

O painel Fontes agora inclui automaticamente arquivos de origem minificados no local. Você pode clicar no botão pretty print { } para desfazer essa ação.

Antes, o painel Origens mostrava conteúdo reduzido por padrão. Para formatar o conteúdo, era preciso clicar no botão de formatação manualmente. Além disso, o conteúdo bem impresso não era exibido na mesma guia, mas em outra guia ::formatted.

Mostra um arquivo minificado antes e depois de o Stylus no local automático.

Problemas do Chromium: 1383453, 1382752 e 1382397

Melhor destaque de sintaxe e visualização inline para Vue, SCSS e muito mais.

O painel Sources aprimorou o destaque de sintaxe de vários formatos de arquivo amplamente utilizados, permitindo que você leia o código com mais facilidade e reconheça sua estrutura, incluindo Vue, JSX, Dart, LESS, SCSS, SASS e CSS inline.

Destaque de sintaxe no Vue.

Além disso, o DevTools também melhorou a prévia inline para Vue, HTML inline e TSX. Passe o cursor sobre uma variável para visualizar o valor dela.

Prévia inline do Vue.

Além disso, o DevTools agora mostra o mapa de origem de uma folha de estilo no painel Sources. Por exemplo, ao abrir um arquivo SCSS, é possível acessar o arquivo CSS relacionado clicando no link do mapa de origem.

Link do mapa de origem para SASS.

Problemas do Chromium: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1365}106, 1365}106

Preenchimento automático ergonômico e consistente no console

O DevTools aprimora a experiência de preenchimento automático implementando as seguintes mudanças:

  • Tab é sempre usado para o preenchimento automático.
  • O comportamento de Arrow right e Enter varia de acordo com o contexto.
  • A experiência de preenchimento automático é consistente em todos os editores de texto, nos painéis Console, Fontes e Elementos.

Por exemplo, veja o que acontece quando você digita cons no Console:

  • O Console exibe uma lista de sugestões de preenchimento automático, com uma borda pontilhada sutil na parte superior indicando que a navegação ainda não começou. Borda pontilhada ao redor da opção de preenchimento automático na parte superior.

  • O Console executa a linha quando você pressiona Enter. Antes, a linha com a principal sugestão seria preenchida automaticamente. Para preencher automaticamente, pressione Tab ou Arrow Right. Executa a linha ao Enter.

  • O console destaca a opção selecionada conforme você navega pela lista de sugestões usando os atalhos Arrow up e Arrow down. Destaques durante a navegação pelas sugestões.

  • Para completar automaticamente com a opção selecionada durante a navegação, use as teclas Tab, Enter ou Arrow Right do teclado. Preenchimento automático com a opção selecionada durante a navegação.

  • Ao editar no meio do código, por exemplo, quando o cursor estiver entre n e s, use Tab para o preenchimento automático, Enter para executar a linha e Arrow Right para mover o cursor para frente. Fazer edições no meio do código.

Problemas do Chromium: 1399436, 1276960

Destaques diversos

Estas são algumas correções importantes nesta versão:

  • Um problema de regressão no DevTools, em que falhava ao parar na instrução debugger em scripts in-line, foi resolvido. (1385374).
  • Uma nova configuração do Console que permite expandir ou recolher mensagens do console.trace() por padrão. Alterne as configurações em Configurações > Preferências > Expanda mensagens console.trace() por padrão. (1139616).
  • O painel Snippets no painel Fontes é compatível com o preenchimento automático avançado, semelhante ao Console. (772949). Preenchimento automático em snippets.

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.