Novidades do DevTools (Chrome 110)

Jecelyn Yeen

Limpar o painel de desempenho na recarga

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

Antes, o painel Performance mostrava uma linha do tempo com capturas de tela de gravações anteriores. Isso dificultou a visualização do início da medição. 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 está alinhado com o painel Insights de desempenho, que já fazia o mesmo.

Problemas do Chromium: 1101268, 1382044

Atualizações do Gravador

Conferir e destacar o código do fluxo de usuários no Recorder

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

O gravador destaca o código correspondente quando você passa o cursor sobre cada etapa à esquerda, facilitando o acompanhamento do fluxo. É possível mudar o formato do código usando o menu suspenso, que permite alternar entre formatos como o script Nightwatch Test.

Problema do Chromium: 1385489

Personalizar tipos de seletor de uma gravação

É possível criar gravações que capturem apenas os tipos de seletor que são importantes para você. Com a nova opção de personalizar tipos de seletor ao criar uma nova gravação, é possível incluir ou excluir seletores, como XPath, garantindo que você capture apenas os seletores que quiser nos fluxos de usuários.

Problema do Chromium: 1384431

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

O Gravador agora permite editar 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.

Problema do Chromium: 1381971

Impressão automática no local

O painel Sources agora mostra automaticamente os arquivos-fonte minificados no lugar. Clique no botão pretty print { } para desfazer a ação.

Antes, o painel Origens mostrava conteúdo minificado por padrão. Para formatar o conteúdo, era necessário clicar manualmente no botão de impressão. Além disso, o conteúdo com impressão bonita não era mostrado na mesma guia, mas em outra guia ::formatted.

Problemas do Chromium: 1383453, 1382752, 1382397

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

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

Além disso, o DevTools também melhorou a visualização inline para Vue, HTML inline e TSX. Passe o cursor sobre uma variável para conferir o valor dela.

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, você pode acessar o arquivo CSS relacionado clicando no link do sourcemap.

Problemas do Chromium: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1392106, 1149734

Preenchimento automático ergonômico e consistente no console

As DevTools aprimoram a experiência de preenchimento automático com as seguintes mudanças:

• Tab é sempre usado para 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 editores de texto, nos painéis Console, Origens e Elementos

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

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

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

• O Console destaca a opção selecionada enquanto você navega pela lista de sugestões usando os atalhos Arrow up e Arrow down.

• Para fazer a conclusão automática com a opção selecionada durante a navegação, use as teclas do teclado Tab, Enter ou Arrow Right.

• Ao editar no meio do código, por exemplo, quando o cursor está entre n e s, use Tab para a conclusão automática, Enter para executar a linha e Arrow Right para mover o cursor para frente.

Problemas do Chromium: 1399436, 1276960

Destaques diversos

Confira algumas correções importantes desta versão:

• Um problema de regressão nas Ferramentas do desenvolvedor, em que ele não parava na instrução debugger em scripts inline, foi resolvido. (1385374).
• Uma nova configuração do console que permite abrir ou fechar mensagens console.trace() por padrão. Alterne as configurações em Configurações > Preferências > Abrir mensagens console.trace() por padrão. (1139616).
• O painel Snippets no painel Origens oferece suporte ao preenchimento automático aprimorado, semelhante ao Console. (772949)

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.

• Envie feedback e solicitações de recursos para crbug.com.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

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