Novidades do DevTools (Chrome 77)

Kayce Basques
Kayce Basques
X GitHub Falha

Copiar estilos do elemento

Clique com o botão direito do mouse em um nó na Árvore DOM para copiar o CSS desse nó para a área de transferência.

Copiar estilos.

Figura 1. Copiar estilos do elemento.

Agradecemos a Adam Argyle e VisBug pela inspiração.

Visualizar mudanças de layout

Suponha que você esteja lendo uma notícia no seu site favorito. Ao ler a página, você continua se perdendo porque o conteúdo fica pulando. Esse problema é chamado de mudança de layout. Isso geralmente acontece quando as imagens e os anúncios terminam de carregar. A página não reservou espaço para as imagens e os anúncios, então o navegador precisa deslocar todo o restante do conteúdo para baixo a fim de abrir espaço para eles. A solução é usar placeholders.

O DevTools agora pode ajudar a detectar mudanças de layout:

  1. Abra o Command Menu.
  2. Comece a digitar Rendering.
  3. Execute o comando Show Rendering.
  4. Marque a caixa de seleção Layout Shift Regiões. À medida que você interage com uma página, as mudanças de layout são destacadas em azul.

Uma mudança de layout.

Figura 2. Uma mudança de layout.

Problema 961846 do Chromium

Lighthouse 5.1 no painel Auditorias

O painel Auditorias agora está executando o Lighthouse 5.1. As novas auditorias incluem:

A nova interface do painel Auditorias.

Figura 3. A nova interface do painel Auditorias.

As versões Node e CLI do Lighthouse 5.1 têm três novos recursos importantes que valem a pena conferir:

  • Orçamentos de performance. Evite a regressão ao longo do tempo especificando o número de solicitações e os tamanhos de arquivo que as páginas não podem exceder.
  • Plug-ins: Amplie o Lighthouse com suas próprias auditorias personalizadas.
  • Pacotes de pilha. Adicione auditorias adaptadas a pilhas de tecnologia específicas. o WordPress Stack Pack foi enviado primeiro. Os pacotes de pilhas do React e AMP estão em desenvolvimento.

Sincronização de temas do SO

Se você estiver usando o tema escuro do SO, o DevTools agora alternará para o próprio tema escuro automaticamente.

Atalho de teclado para abrir o editor do ponto de interrupção

Pressione Control+Alt+B ou Command+Option+B (Mac) quando o foco estiver no Editor do painel Sources para abrir o Breakpoint Editor. Use o Breakpoint Editor para criar Logpoints e Conditional Breakpoints.

O editor de ponto de interrupção.

Figura 4. O editor do ponto de interrupção.

Cache de pré-busca no painel Rede

A coluna Tamanho do painel "Rede" agora mostra (prefetch cache) quando um recurso foi carregado do cache de pré-busca. A pré-busca é um recurso de plataforma da Web novo para acelerar os carregamentos de página subsequentes. Posso usar... informa que o recurso é compatível com 83,33% dos navegadores globais desde julho de 2019.

A coluna "Size" mostrando que os recursos vieram do cache de pré-busca.

Figura 5. A coluna Tamanho mostra que prefetch2.html e prefetch2.css vieram de (prefetch cache).

Consulte Demonstração de pré-busca para testar.

Problema 935267 do Chromium

Propriedades particulares ao visualizar objetos

O Console agora mostra campos de classe particular nas visualizações dos objetos.

Ao inspecionar um objeto, o Console agora mostra campos particulares como "#color".

Figura 6. A versão antiga do Chrome à esquerda não mostra o campo #color ao inspecionar o objeto, enquanto a nova versão à direita mostra.

Notificações e mensagens push no painel "Application"

A seção "Serviços em segundo plano" do painel "Aplicativo" agora é compatível com mensagens push e notificações. As mensagens push ocorrem quando um servidor envia informações para um service worker. As notificações ocorrem quando um service worker ou script de página mostra informações ao usuário.

Assim como acontece com os recursos de busca em segundo plano e sincronização em segundo plano do Chrome 76, depois que você começa a gravar, as mensagens push e as notificações nesta página são gravadas por três dias, mesmo quando a página está fechada e mesmo quando o Chrome é fechado.

Os novos painéis "Notificações" e "Mensagens push".

Figura 7. Os novos painéis "Mensagens push" e "Notificações" no painel "Application".

Problema 927726 do Chromium

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