Novidades do DevTools (Chrome 85)

Jecelyn Yeen

Edição de estilo para frameworks CSS-in-JS

O painel "Estilos" agora tem um suporte melhor para editar estilos criados com as APIs do Modelo de objeto CSS (CSSOM, na sigla em inglês). Muitos frameworks e bibliotecas de CSS-in-JS usam as APIs CSSOM nos bastidores para construir estilos.

Agora também é possível editar estilos adicionados em JavaScript usando folhas de estilo construtíveis. As folhas de estilo construíveis são uma nova maneira de criar e distribuir estilos reutilizáveis ao usar o Shadow DOM.

Por exemplo, os estilos h1 adicionados com CSSStyleSheet (APIs CSSOM) não eram editáveis antes. Agora é possível editar no painel "Estilos":

Problema #946975 do Chromium

Lighthouse 6 no painel do Lighthouse

O painel do Lighthouse agora está executando o Lighthouse 6. Confira O que há de novo no Lighthouse 6.0 para um resumo de todas as principais mudanças ou as notas da versão v6.0.0 para uma lista completa de todas as mudanças.

O Lighthouse 6.0 apresenta três novas métricas ao relatório: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) e Total Blocking Time (TBT). LCP e CLS são duas das novas Core Web Vitals do Google, e o TBT é um proxy de medição de laboratório para outra Core Web Vital, o First Input Delay.

A fórmula da pontuação de performance também foi reponderada para refletir melhor a experiência de carregamento dos usuários.

Problema do Chromium #772558

Suspensão de uso da First Meaningful Paint (FMP)

O First Meaningful Paint (FMP) foi descontinuado no Lighthouse 6.0. Ele também foi removido do painel "Performance". A Maior exibição de conteúdo (LCP, na sigla em inglês) é a substituta recomendada para o FMP. Consulte Primeira exibição significativa para saber por que ela foi descontinuada.

Problema do Chromium #1096008

Suporte para novos recursos do JavaScript

O DevTools agora tem um suporte melhor para alguns dos recursos mais recentes da linguagem JavaScript:

• Autocompletar sintaxe de encadeamento opcional: o preenchimento automático de propriedades no console agora é compatível com a sintaxe de encadeamento opcional. Por exemplo, name?. agora funciona além de name. e name[.
• Destaque de sintaxe para campos particulares: os campos de classe particulares agora são destacados corretamente e formatados no painel "Fontes".
• Realce de sintaxe para o operador de coalescência nulo: agora o DevTools imprime corretamente o operador de coalescência nulo no painel "Fontes".

Problemas do Chromium #1083214, #1073903, #1083797

Novos avisos de atalho de app no painel "Manifesto"

Os atalhos de apps ajudam os usuários a iniciar rapidamente tarefas comuns ou recomendadas em um app Web.

O painel "Manifesto" agora mostra avisos se:

• os ícones de atalho do app são menores que 96x96 pixels
• os ícones de atalho e manifesto do app não são quadrados (porque serão ignorados)

Problema do Chromium #955497

Eventos do service worker respondWith na guia "Timing"

A guia "Tempo" do painel "Rede" agora inclui eventos respondWith do service worker. respondWith é o período imediatamente antes da execução do manipulador de eventos fetch do service worker até o momento em que a promessa respondWith do manipulador fetch é concluída.

Problema do Chromium #1066579

Exibição consistente do painel "Computado"

O painel "Calculado" no painel "Elementos" agora é exibido de forma consistente como um painel em todos os tamanhos de viewport. Antes, o painel "Calculado" era mesclado ao painel "Estilos" quando a largura da janela de visualização das DevTools era pequena.

Problema do Chromium #1073899

Deslocamentos de bytecode para arquivos WebAssembly

Agora, o DevTools usa deslocamentos de bytecode para mostrar números de linha da desmontagem do Wasm. Isso deixa mais claro que você está analisando dados binários e é mais consistente com a forma como o tempo de execução do Wasm faz referência a locais.

Problema do Chromium #1071432

Cópia e corte linha por linha no painel Origens

Ao copiar ou recortar sem seleção no editor do painel Fontes, o DevTools copia ou recorta o conteúdo da linha atual. Por exemplo, no vídeo abaixo, o cursor está no fim da linha 1. Depois de pressionar o atalho de teclado de corte, toda a linha é copiada para a área de transferência e excluída.

Problema do Chromium #800028

Atualizações nas configurações do console

Desagrupar mensagens iguais do console

A opção Agrupar semelhantes nas configurações do console agora se aplica a mensagens duplicadas. Antes, ela só era aplicada a mensagens semelhantes.

Por exemplo, antes, o DevTools não desagrupava as mensagens hello mesmo que a opção Agrupar semelhantes estivesse desmarcada. Agora, as mensagens hello não estão mais agrupadas:

Problema do Chromium #1082963

Como manter as configurações de Somente contexto selecionado

As configurações de Somente contexto selecionado em "Configurações do console" agora são mantidas. Antes, as configurações eram redefinidas sempre que você fechava e reabria o DevTools. Essa mudança torna o comportamento da configuração consistente com outras opções de configurações do console.

Problema do Chromium #1055875

Atualizações do painel de performance

Informações de cache de compilação do JavaScript no painel "Performance"

As informações do cache de compilação do JavaScript agora são sempre mostradas na guia "Resumo" do painel "Desempenho". Antes, o DevTools não mostrava nada relacionado ao cache de código se ele não acontecesse.

Problema do Chromium #912581

Alinhamento de tempo de navegação no painel "Performance"

O painel "Performance" costumava mostrar tempos nas réguas com base em quando a gravação começou. Isso mudou para gravações em que o usuário navega. Agora, o DevTools mostra os tempos da régua em relação à navegação.

Também atualizamos os tempos dos eventos DOMContentLoaded, First Paint, First Contentful Paint e Largest Contentful Paint para serem relativos ao início da navegação, o que significa que eles correspondem aos tempos informados pelo PerformanceObserver.

Problema do Chromium #974550

Novos ícones para pontos de interrupção, pontos de interrupção condicionais e pontos de registro

O painel Fontes tem novos designs para pontos de interrupção, pontos de interrupção condicionais e logpoints. Os pontos de interrupção têm um design de flag atualizado com cores mais claras e agradáveis. Ícones são adicionados para diferenciar pontos de interrupção condicionais e logpoints.

Problema do Chromium #1041830

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.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

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