Novidades do DevTools (Chrome 72)

Kayce Basques
Kayce Basques
X GitHub Falha

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

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.

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

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. Essa auditoria está disponível no seu relatório em Práticas recomendadas > Aprovações de auditoria.

Bibliotecas JavaScript detectadas

Figura 4. Bibliotecas JavaScript detectadas

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

Digitando "lighthouse" 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 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.

Novidades no DevTools

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