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 as APIs do Modelo de objeto CSS (CSSOM, na sigla em inglês). Muitos frameworks e bibliotecas de CSS-in-JS usam as APIs do CSSOM em segundo plano para criar estilos.

Agora você também pode editar estilos adicionados em JavaScript usando folhas de estilo construí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 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 ver 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 tempo total de bloqueio (TBT). A LCP e a 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 Vitals, 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.

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 do painel "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: o preenchimento automático de propriedades no Console agora oferece suporte à 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 são adequadamente destacados e bem impressos no painel "Fontes".
  • Destaque de sintaxe para o operador de coalescência nulo: o DevTools agora mostra corretamente o operador de coalescência nulos 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 a promessa respondWith do gerenciador fetch é estabelecida.

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 todos os tamanhos da janela de visualização. Anteriormente, o painel "Calculado" era mesclado dentro do painel "Estilos" quando a largura da janela de visualização do DevTools 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. 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 referencia os 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 copia ou recorta 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 recortado, 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. Antes, isso só era aplicado a mensagens semelhantes.

Por exemplo, antes, o DevTools não desagrupe as mensagens hello, mesmo que a opção Group similar esteja 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 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.

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 "Desempenho". Antes, o DevTools não mostraria nada relacionado ao armazenamento em cache do código se ele não acontecesse.

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 mudou 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 tempo da navegação no painel de desempenho

Também atualizamos os horários dos eventos 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 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 para 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é-visualização 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.
  • Para informar um problema do DevTools, use Mais opções   Mais   > Ajuda > Informar problemas do 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59