Novidades do DevTools (Chrome 85)

Edição de estilo para frameworks CSS em JS

O painel "Estilos" agora tem um suporte melhor para a edição de estilos que foram criados com as APIs do modelo de objeto CSS (CSSOM, na sigla em inglês). Muitos frameworks e bibliotecas CSS-in-JS usam as APIs CSSOM em segundo plano para criar estilos.

Agora também é possível editar estilos adicionados em JavaScript usando as 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 são editáveis anteriormente. É possível editar o seguinte 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 introduz três novas métricas no relatório: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) e Total Bloqueio Time (TBT). LCP e CLS são duas das novas Core Web Vitals do Google, e o TBT é um substituto de medição de laboratório para outro Core Web Vitals, latência na primeira entrada.

A fórmula da pontuação de performance também foi repensada 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 primeira exibição significativa (FMP, na sigla em inglês)

A Primeira exibição significativa (FMP, na sigla em inglês) foi descontinuada no Lighthouse 6.0. Ele também foi removido do painel "Desempenho". A Maior exibição de conteúdo é a substituição recomendada para a FMP. Consulte Primeira exibição significativa para saber por que ele foi descontinuado.

Problema do Chromium #1096008

Suporte a novos recursos do JavaScript

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

  • Preenchimento automático da sintaxe de encadeamento opcional: o preenchimento automático de propriedades no Console agora oferece suporte à sintaxe de encadeamento opcional, por exemplo, name?. agora funciona além de name. e name[.
  • Destaque de sintaxe para campos privados: os campos de classe privada agora têm a sintaxe destacada e o estilo exibido no painel Origens.
  • Destaque de sintaxe para operador de coalescência nulo: o DevTools agora imprime corretamente o operador de coalescência nullish no painel Origens.

Problemas do Chromium 1083214, 1073903 e 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 da Web.

O painel "Manifesto" 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 de manifesto não são quadrados (porque serão ignorados)

Avisos de atalho do app

Problema do Chromium 955497

Eventos respondWith do service worker na guia "Tempo"

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

service worker "respondWith"

Problema do Chromium #1066579

Exibição consistente do painel Computed

O painel computado no painel Elementos agora é exibido de maneira consistente como um painel em todos os tamanhos de janela de visualização. Anteriormente, o painel Computed era mesclado dentro do painel Styles 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 do desassembly 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 cortar linhas no painel Origens

Ao executar o recurso de copiar ou recortar sem seleção no Editor do painel Sources, o DevTools copiará ou recortará 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, 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

Agora o botão Grupo semelhante nas configurações do console é aplicado a mensagens duplicadas. Antes, ela só era aplicada a mensagens semelhantes.

Por exemplo, anteriormente, o DevTools não desagrupava as mensagens hello mesmo que a opção Grupo semelhante estasse desmarcada. Agora, as mensagens hello estão desagrupadas:

Problema do Chromium #1082963

Manter as configurações de Somente contexto selecionado

As configurações de Somente contexto selecionado nas configurações do console agora são mantidas. Anteriormente, 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 contexto selecionado

Problema do Chromium #1055875

Atualizações do painel de desempenho

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

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

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

Problema do Chromium 912581

O painel de desempenho era usado para mostrar os horários nas réguas com base em quando o registro 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 o tempo de navegação no painel "Performance"

Também atualizamos os horários dos eventos DOMContentLoaded, Primeira exibição, Primeira exibição de conteúdo e Maior exibição de conteúdo 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 têm um design atualizado da bandeira, com cores mais brilhantes e mais amigáveis. Ícones são adicionados para diferenciar pontos de interrupção e logpoints condicionais.

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 oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

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

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59