Novidades do DevTools (Chrome 72)

Kayce Basques
Kayce Basques
X GitHub

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

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

Visualizar métricas de performance

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

First Meaningful Paint na seção "Timing"

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

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ó 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 obter rapidamente uma referência a esse nó do DOM. O fluxo de trabalho usual é acessar o painel "Elementos", clicar com o botão direito do mouse no nó da árvore DOM, selecionar Copiar > Copiar seletor e transmitir esse seletor CSS para document.querySelector(). Mas, se o nó estiver em um shadow DOM, essa abordagem não vai funcionar porque o seletor gera um caminho de dentro da árvore shadow.

Para conseguir rapidamente uma referência a um nó do DOM, clique com o botão direito do mouse no nó 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 é especialmente útil ao trabalhar com o Shadow DOM, mas pode ser usado para qualquer nó do 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 no painel "Auditorias"

O painel "Auditorias" agora executa o Lighthouse 3.2. A versão 3.2 inclui uma nova auditoria chamada Bibliotecas JavaScript detectadas. Essa auditoria lista as bibliotecas JS que o Lighthouse detectou na página. Você pode encontrar essa auditoria no relatório em Práticas recomendadas > Auditorias aprovadas.

Bibliotecas JavaScript detectadas

Figura 4. Bibliotecas JavaScript detectadas

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

Digitando "lighthouse" no menu de comandos

Figura 5. Digitando lighthouse no menu de comandos

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu 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 o que foi abordado na série Novidades do DevTools.