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 gravar um carregamento de página, o DevTools agora marca métricas de desempenho, como DOMContentLoaded e First Meaningful Paint, na seção Timings.

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 usual é acessar 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(). 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. As Ferramentas do desenvolvedor copiam 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 "Audits" 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. Como digitar 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 visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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 o que foi abordado na série Novidades no DevTools.