Novidades do DevTools (Chrome 110)

Jecelyn Yeen

Limpar o painel de desempenho ao recarregar

Agora, o painel Performance limpa a captura de tela e o rastreamento quando você clica no botão Iniciar criação de perfil e recarregar a página.

Antes, o painel Performance mostrava uma linha do tempo com capturas de tela de gravações anteriores. Isso dificultava saber quando a medição real começava. Agora, o painel sempre navega primeiro até a página about:blank para garantir que a gravação comece com um rastreamento 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

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

O Recorder agora oferece uma visualização de código dividida, facilitando a visualização do código de fluxo do usuário. 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 rastreamento 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

Você pode criar gravações que capturam apenas os tipos de seletor que são importantes para você. Com a nova opção de personalizar os tipos de seletores ao criar uma gravação, é possível incluir ou excluir seletores como XPath, garantindo que você capture apenas os seletores desejados 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

Formatação automática no local

O painel Fontes agora aplica estilos de formatação automaticamente a arquivos de origem minificados. Clique no botão formatação bonita { } para desfazer.

Antes, o painel Fontes mostrava conteúdo minimizado por padrão. Para formatar o conteúdo, era necessário clicar manualmente no botão de impressão bonita. Além disso, o conteúdo formatado não era exibido 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 Fontes aprimorou o destaque de sintaxe para vários formatos de arquivo usados com frequência, permitindo que você leia o código com mais facilidade e reconheça a estrutura dele, incluindo Vue, JSX, Dart, LESS, SCSS, SASS e CSS inline.

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.

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

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

Preenchimento automático ergonômico e consistente no console

O DevTools melhora a experiência de preenchimento automático implementando 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 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 mostra uma lista de sugestões de preenchimento automático, com uma borda pontilhada sutil ao redor da opção superior, indicando que a navegação ainda não começou.

• O Console executa a linha quando você pressiona Enter. Antes, ele preenchia automaticamente a linha com a principal sugestão. Para usar o preenchimento automático, 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 usar o preenchimento automático 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 preenchimento automático, 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 nesta versão:

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

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.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

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