Novidades do DevTools (Chrome 72)

Kayce Basques
Kayce Basques
X GitHub Falha

Os novos recursos e as principais mudanças do Chrome DevTools no Chrome 72 incluem:

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

Conferir métricas de desempenho

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

Primeira exibição importante na seção "Tempo"

Figura 1. Primeira exibição importante 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ó (talvez usando a função page.click() do Puppeteer) e queira rapidamente obter uma referência a esse nó DOM. O fluxo de trabalho normal é acessar o painel "Elementos", clicar com o botão direito do mouse no nó na árvore DOM, selecionar Copiar > Copiar seletor e transmitir esse seletor de CSS para document.querySelector(). No entanto, se o nó estiver em um Shadow DOM, essa abordagem não vai funcionar, porque o seletor gera um caminho dentro da árvore paralela.

Para acessar rapidamente uma referência a um nó DOM, clique com o botão direito do mouse no nó e selecione Copiar > Copiar caminho JS. 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 usá-lo 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 quais bibliotecas JS o Lighthouse detectou na página. Essa auditoria está disponível 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 comandos digitando Lighthouse ou PWA.

Se você 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é-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