Novidades do DevTools (Chrome 85)

Jecelyn Yeen

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

O painel "Styles" agora tem suporte melhor para editar estilos criados com as APIs CSS Object Model (CSSOM). Muitos frameworks e bibliotecas CSS-in-JS usam as APIs CSSOM para criar estilos.

Agora você também pode editar estilos adicionados em JavaScript usando Folhas de estilo com capacidade de construção. As folhas de estilo constructá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 anteriormente. Agora há elementos editáveis no painel "Styles":

Problema do Chromium #946975

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 no relatório: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) e Total Blocking Time (TBT). LCP e CLS são duas das novas Principais métricas da Web do Google, e o TBT é um proxy de medição de laboratório para outra métrica da Web, a First Input Delay.

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

Problema do Chromium #772558

Suspensão do uso da primeira pintura significativa (FMP)

A primeira pintura significativa (FMP) foi descontinuada no Lighthouse 6.0. Ele também foi removido do painel "Performance". Largest Contentful Paint é a substituição recomendada para FMP. Consulte Primeira pintura significativa para uma explicação sobre por que ela foi descontinuada.

Problema do Chromium #1096008

Suporte a novos recursos do JavaScript

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

• Preenchimento automático de sintaxe de vinculação opcional: o preenchimento automático de propriedades no console agora oferece suporte à sintaxe de vinculação opcional. Por exemplo, name?. agora funciona além de name. e name[.
• Destaque de sintaxe para campos privados: os campos de classe privados agora são corretamente realçados e mostrados no painel "Origens".
• Realce de sintaxe para o operador coalescente nulo: agora o DevTools mostra corretamente o operador coalescente nulo no painel "Fontes".

Problemas do Chromium #1083214, #1073903 e #1083797

Novos avisos de atalho de app no painel "Manifest"

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

O painel "Manifest" agora mostra avisos se:

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

Problema do Chromium #955497

Eventos respondWith do service worker na guia "Temporização"

A guia "Timing" do painel "Network" agora inclui eventos respondWith do service worker. respondWith é o tempo imediatamente antes da execução do manipulador de eventos fetch do worker do serviço até o momento em que a promessa respondWith do manipulador fetch é resolvida.

Problema do Chromium #1066579

Exibição consistente do painel "Computed"

O painel "Computed" no painel "Elements" agora é exibido de forma consistente em todos os tamanhos de viewport. Anteriormente, o painel "Computed" era mesclado ao painel "Styles" quando a largura da janela de visualização das Ferramentas do desenvolvedor era estreita.

Problema do Chromium #1073899

Deslocamentos de bytecode para arquivos WebAssembly

O DevTools agora 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 ambiente de execução do Wasm faz referência a locais.

Problema do Chromium #1071432

Cópia e corte por linha no painel Origens

Ao copiar ou cortar sem seleção no editor do painel Sources, o DevTools copia ou corta o conteúdo da linha atual. Por exemplo, no vídeo abaixo, o cursor está no final da linha 1. Depois de pressionar o atalho de teclado "cortar", a linha inteira é copiada para a área de transferência e excluída.

Problema do Chromium #800028

Atualizações nas configurações do console

Desfazer o agrupamento de mensagens iguais no console

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

Por exemplo, antes, o DevTools não desagrupava as mensagens hello, mesmo que a opção Group similar estasse 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 Somente no contexto selecionado nas configurações do console agora são mantidas. Antes, as configurações eram redefinidas sempre que você fechava e abria o DevTools. Essa mudança torna o comportamento de configuração consistente com outras opções de configurações do console.

Problema do Chromium #1055875

Atualizações do painel de desempenho

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

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

Problema do Chromium #912581

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

O painel "Performance" usado para mostrar os tempos nas réguas com base no início da gravação. Isso mudou para gravações em que o usuário navega, e agora os DevTools mostram os tempos da régua em relação à navegação.

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

Problema do Chromium #974550

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

O painel Origens 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 bandeira atualizado com cores mais brilhantes e agradáveis. Os ícones foram adicionados para diferenciar pontos de interrupção condicionais e logpoints.

Problema do Chromium #1041830

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.

• Envie feedback e solicitações de recursos para crbug.com.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

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