Esta página foi traduzida pela API Cloud Translation.

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 a 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.
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.
O Console destaca a opção selecionada conforme você navega pela lista de sugestões usando os atalhos Arrow up e Arrow down.
Para completar automaticamente com a opção selecionada durante a navegação, use as teclas Tab, Enter ou Arrow Right do teclado.
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.

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 > Expandir 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).

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é-visualização 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.
Para informar um problema do DevTools, use Mais opções > Ajuda > Informar problemas do 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

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

Visualizar métricas de desempenho no painel "Desempenho"
Destacar nós de texto na árvore do DOM
Copiar o caminho do JS para um nó do DOM
Atualizações do painel de auditorias, incluindo uma nova auditoria que detecta bibliotecas JS e novas palavras-chave para acessar o painel "Auditorias" no menu de comando.
Dica bônus: use o Modo dispositivo para inspecionar consultas de mídia (vídeo)