Novidades do DevTools (Chrome 85)

Jecelyn Yeen

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

O painel "Styles" agora oferece um suporte melhor para a edição de estilos criados com o objeto CSS Model (CSSOM). Muitas estruturas e bibliotecas de CSS-in-JS usam as APIs do CSSOM internamente para e construção de estilos.

Agora você também pode editar estilos adicionados em JavaScript usando folhas de estilo construíveis. Construção As folhas de estilo são uma nova maneira de criar e distribuir estilos reutilizáveis usando o Shadow DOM.

Por exemplo, os estilos h1 adicionados com CSSStyleSheet (APIs do CSSOM) não são editáveis antes. Agora eles podem ser editados no painel Estilos:

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 ter um resumo das 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 tempo total de bloqueio (TBT). A LCP e a CLS são duas das novas Core Web Vitals, e o TBT é um proxy de medição de laboratório para outra Core Web Vitals, a First Input Atraso.

A fórmula da pontuação de desempenho também foi reavaliada para refletir melhor as métricas carregando do usuário.

Novas métricas de desempenho no Lighthouse 6.0

Problema do Chromium 772558

Descontinuação da First Meaningful Paint (FMP)

A First Meaningful Paint (FMP) foi descontinuada no Lighthouse 6.0. Ele também foi removido da Painel de desempenho. A opção Largest Contentful Paint é a substituição recomendada para a FMP. Consulte Primeira Pintura significativa para saber por que ela foi descontinuada.

Problema do Chromium #1096008

Compatibilidade com novos recursos do JavaScript

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

  • Preenchimento automático de sintaxe de encadeamento opcional: preenchimento automático de propriedades no console oferece suporte a sintaxe de encadeamento opcional, por exemplo, name?. agora funciona com name. e name[
  • Destaque de sintaxe para campos particulares: os campos de classes particulares agora estão corretos de sintaxe destacada e com formatação no painel Fontes.
  • Destaque de sintaxe para o operador de coalescência nulo (link em inglês): o DevTools agora apresenta a formatação correta. o operador de coalescência nula no painel Sources.

Problemas do Chromium #1083214, 1073903, #1083797

Novos avisos de atalhos de apps no painel "Manifest"

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

O painel "Manifest" agora vai mostrar avisos se:

  • os ícones de atalhos de apps forem menores que 96 x 96 pixels;
  • Os ícones de atalhos de apps e de manifesto não são quadrados (porque serão ignorados).

Avisos de atalhos de apps

Problema do Chromium 955497

Eventos respondWith do service worker na guia "Timing"

A guia "Tempo" do painel "Rede" agora inclui eventos respondWith do service worker. respondWith é o momento imediatamente antes de o manipulador de eventos fetch do service worker ser executado no momento em que o A promessa respondWith do gerenciador fetch é resolvida.

service worker "respondWith"

Problema do Chromium #1066579

Exibição consistente do painel Computed

O painel "Calculado" no painel "Elementos" agora é exibido de maneira consistente como um painel em toda a janela de visualização. tamanhos. Anteriormente, o painel Computed era mesclado dentro do painel Styles quando a largura do DevTools janela de visualização era estreita.

Problema do Chromium #1073899

Deslocamentos de bytecode para arquivos WebAssembly

O DevTools agora usa deslocamentos de bytecode para exibir números de linha de desmontagem do Wasm. Assim, está 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.

Deslocamentos de bytecode

Problema do Chromium #1071432

Copiar e recortar em linha no painel Origens

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

Problema do Chromium #800028

Atualizações das configurações do console

Desagrupar as mesmas mensagens do console

A opção Grupo semelhante nas configurações do console agora se aplica a mensagens duplicadas. Anteriormente aplicada a mensagens semelhantes.

Por exemplo, antes, o DevTools não desagrupe as mensagens hello, mesmo que Group Similar está desmarcada. Agora as mensagens hello estão desagrupadas:

Problema do Chromium 1082963

Manter as configurações Somente contexto selecionado

As configurações de Somente o contexto selecionado nas configurações do console foram mantidas. Antes, as configurações eram redefinidas toda vez que você fechava e reabriu as DevTools. Essa mudança deixa o comportamento da configuração consistente com outras opções de Configurações do Console.

Somente o contexto selecionado

Problema do Chromium #1055875

Atualizações do Painel de desempenho

Informações de cache de compilação em JavaScript no painel "Desempenho"

As informações do cache de compilação em JavaScript agora são sempre exibidas na guia "Resumo" do Painel de desempenho. Antes, o DevTools não mostrava nada relacionado ao armazenamento em cache do código o armazenamento em cache não aconteceu.

Informações de cache de compilação em JavaScript

Problema do Chromium 912581

O painel de desempenho usado para mostrar os tempos nas réguas com base em quando a gravação começou. Isso tem alterada para gravações em que o usuário navega, em que o DevTools agora mostra os tempos da régua em relação à navegação.

Alinhar o tempo da navegação no painel de desempenho

Também atualizamos os horários de DOMContentLoaded, First Paint, First Contentful Paint e Largest Os eventos Contentful Paint devem ser relativos ao início da navegação, o que significa que eles correspondem ao de velocidade informados por PerformanceObserver.

Problema do Chromium 974550

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

O painel Sources tem novos designs para pontos de interrupção, pontos de interrupção condicionais e logpoints. Os pontos de interrupção recebem uma bandeira atualizada com cores mais brilhantes e amigáveis. Ícones são adicionados a diferenciar pontos de interrupção condicionais e logpoints.

Pontos de interrupção

Problema do Chromium #1041830

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento dão acesso aos recursos mais recentes do DevTools, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.

  • Envie uma sugestão ou feedback pelo site crbug.com.
  • Informe um problema do DevTools usando Mais opções   Mais > Ajuda > Relate problemas no DevTools no DevTools.
  • Tuíte em @ChromeDevTools.
  • Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

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