Novidades do DevTools (Chrome 110)

Jecelyn Yeen

Como limpar o painel de desempenho ao recarregar

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

Anteriormente, o painel Desempenho exibia uma linha do tempo com capturas de tela de gravações anteriores. Desta forma, ficou difícil saber quando a medição real começou. Agora, o painel sempre navega para a página about:blank primeiro para garantir que a gravação comece com um rastro em branco. Isso se alinha ao painel Insights de desempenho, que já fazia o mesmo.

Apagando o painel de desempenho ao recarregar.

Problemas do Chromium: 1101268, 1382044

Atualizações do Gravador

Confira e destaque o código do seu fluxo de usuários no Gravador

O Gravador 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 do código, abra um fluxo de usuário e clique em Show Code.

O Gravador destaca o código correspondente quando você passa o cursor sobre cada etapa à esquerda, facilitando o acompanhamento do fluxo. Você pode alterar o formato do código usando o menu suspenso, que permite alternar entre formatos, como o script Nightwatch Test.

Visualização de código no Gravador.

Problema do Chromium: 1385489

Personalizar os tipos de seletor de uma gravação

É possível criar gravações que capturem somente os tipos de seletor mais importantes para você. Com a nova opção para personalizar os tipos de seletor ao criar um novo registro, é possível incluir ou excluir seletores como XPath, garantindo que você capture apenas os seletores que quiser 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 a gravação

Agora o Gravador permite a edição durante a gravação, garantindo a flexibilidade de fazer alterações 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

Impressão nítida automática no local

O painel Origens agora imprime automaticamente arquivos de origem minimizados no lugar. Para desfazer essa ação, clique no botão de impressão estética { }.

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

Mostra um arquivo minimizado antes e depois da impressão automática no local.

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 para vários formatos de arquivo amplamente utilizados, permitindo ler o código com mais facilidade e reconhecer sua estrutura, incluindo Vue, JSX, Dart, LESS, SCSS, SASS e CSS in-line.

Destaque de sintaxe no Vue.

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

Visualização 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, você pode 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, 115}2106, {713912106{/1385269

Preenchimento automático ergonômico e consistente no console

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

  • 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, Origens 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 na parte de cima indicando que a navegação ainda não começou. Borda pontilhada ao redor da opção de preenchimento automático na parte de cima.

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

  • O Console destaca a opção selecionada enquanto 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 do teclado Tab, Enter ou Arrow Right. 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. Editar no meio do código.

Problemas do Chromium: 1399436 e 1276960

Destaques diversos

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

  • Foi resolvido um problema de regressão no DevTools, em que falhava ao parar na instrução debugger em scripts inline. (1385374).
  • Uma nova configuração de Console que permite expandir ou recolher mensagens de console.trace() por padrão. Alterne as configurações em Settings > Preferences > Expand console.trace() messages por padrão. (1139616).
  • O painel Snippets no painel Fontes é compatível com o preenchimento automático aprimorado, 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 oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59