Novidades do DevTools (Chrome 72)

Kayce Basques

Os novos recursos e as principais mudanças que chegam ao Chrome DevTools no Chrome 72 incluem:

• Visualize as métricas de desempenho no painel "Performance".
• Destaque os 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 acessar o painel de auditorias no menu de comando.

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

Visualizar métricas de desempenho

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.

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.

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 a função page.click() do Puppeteer, talvez) e queira receber rapidamente 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 do DOM, selecionar Copiar > Copiar seletor e passar o seletor de CSS para document.querySelector(). No entanto, se o nó estiver em um DOM paralelo, 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ó DOM 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ó. Como mencionado acima, isso é útil principalmente ao trabalhar com Shadow DOM, mas você pode usá-lo para qualquer nó 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 as bibliotecas JS que o Lighthouse detectou na página. Essa auditoria está disponível no seu relatório em Práticas recomendadas > Aprovações de auditoria.

Figura 4. Bibliotecas JavaScript detectadas

Além disso, agora é possível acessar o painel "Audits" 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 navegador de desenvolvimento padrão. Esses canais de pré-lançamento dão acesso aos recursos mais recentes do DevTools, permitem testar APIs modernas da plataforma da Web e ajudam a encontrar problemas no site antes que os usuários o façam!

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada ao DevTools.

• Envie feedback e solicitações de recursos para crbug.com.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

Uma lista de tudo que foi abordado na série Novidades no DevTools.