Novidades do DevTools (Chrome 72)

Kayce Basques
Kayce Basques
X GitHub Falha

Os novos recursos e as principais mudanças que serão lançadas no Chrome DevTools no Chrome 72 incluem:

Versão em vídeo destas notas da versão

Visualizar métricas de performance

Depois de registrar um carregamento de página, o DevTools agora marca métricas de desempenho como DOMContentLoaded e First Meaningful Paint na seção Tempos.

Primeira pintura significativa na seção Tempo

Figura 1. Primeira pintura significativa na seção Tempo

Destacar nós de texto

Quando você passa o cursor sobre um nó de texto na árvore do DOM, o DevTools agora destaca esse nó de texto na janela de visualização.

Como destacar um nó de texto

Figura 2. Como destacar um nó de texto

Copiar caminho JS

Suponha que você esteja escrevendo um teste de automação que envolva clicar em um nó (usando a função page.click() do Puppeteer, talvez) e queira conseguir rapidamente uma referência a esse nó do DOM. O fluxo de trabalho normal é acessar o painel "Elementos", clicar com o botão direito do mouse no nó na árvore do DOM, selecionar Copiar > Copiar seletor e passar o seletor de CSS para document.querySelector(). No entanto, se o nó estiver em um Shadow DOM, essa abordagem não funcionará, porque o seletor vai gerar um caminho dentro da árvore paralela.

Para acessar rapidamente uma referência a um nó do DOM, clique com o botão direito do mouse nesse nó e selecione Copy > Copy JS path. O DevTools copia para a área de transferência uma expressão document.querySelector() que aponta para o nó. Conforme mencionado acima, isso é particularmente útil ao trabalhar com o Shadow DOM, mas pode ser usado para qualquer nó do DOM.

Copiar caminho JS

Figura 3. Copiar caminho JS

O DevTools copia uma expressão como a abaixo para a área de transferência:

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')

Atualizações do painel de auditorias

O painel "Auditorias" agora está executando o Lighthouse 3.2. A versão 3.2 inclui uma nova auditoria chamada Bibliotecas JavaScript detectadas. Esta auditoria lista as bibliotecas JS que o Lighthouse detectou na página. Ela está no relatório em Práticas recomendadas > Auditorias aprovadas.

Bibliotecas JavaScript detectadas

Figura 4. Bibliotecas JavaScript detectadas

Além disso, agora é possível acessar o painel "Auditorias" no menu de comando digitando Lighthouse ou PWA.

Digitar "farol" no menu de comando

Figura 5. Digite lighthouse no menu de comando.

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   Mais   > 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

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59