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

First Meaningful Paint na seção "Tempo"

Figura 1. First Meaningful Paint na seção "Tempo"

Destacar nós de texto

Quando você passa o cursor sobre um nó de texto na árvore DOM, as Ferramentas do desenvolvedor agora destacam esse nó de texto no viewport.

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 Copy > Copy selector e transmitir esse seletor CSS para document.querySelector(). No entanto, se o nó estiver em um DOM shadow, essa abordagem não vai funcionar porque o seletor gera um caminho dentro da árvore shadow.

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