Novidades do DevTools (Chrome 72)

Kayce Basques

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

• Visualize as métricas de desempenho no painel "Desempenho".
• Destaque nós de texto na árvore do DOM.
• Copie o caminho do JS em um nó do DOM na árvore do DOM.
• Atualizações do painel de auditorias, incluindo uma nova auditoria que detecta bibliotecas JS e novas palavras-chave para acesse o painel "Auditorias" no menu de comando.

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 Primeira exibição significativa na seção Tempos.

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

Destacar nós de texto

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

Figura 2. Como destacar um nó de texto

Copiar caminho JS

Suponha que você esteja escrevendo um teste de automação que envolve clicar em um nó (usando o page.click(), talvez) e queira acessar rapidamente uma referência a esse nó DOM. A o fluxo de trabalho normal é ir para o painel Elements, 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(). Mas se o nó está em um Shadow DOM. Essa abordagem não funciona porque o seletor gera um caminho de dentro da árvore paralela.

Para obter rapidamente uma referência a um nó DOM, clique com o botão direito do mouse no nó DOM e selecione Copy > Copiar JS caminho de conversão. O DevTools copia para a área de transferência uma expressão document.querySelector() que aponta para a nó. Como mencionado acima, isso é particularmente útil ao trabalhar com o Shadow DOM, mas você pode usar para qualquer nó do DOM.

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 em quais bibliotecas JS o Lighthouse detectou da página. Você encontra essa auditoria no seu relatório em Práticas recomendadas > Auditorias aprovadas.

Figura 4. Bibliotecas JavaScript detectadas

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

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 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.
• Informe um problema do DevTools usando Mais opções   > Ajuda > Relate problemas no 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.