Novidades do DevTools (Chrome 88)

Jecelyn Yeen

Inicialização mais rápida do DevTools

A inicialização do DevTools agora está cerca de 37% mais rápida em termos de compilação em JavaScript (de 6,9 para 5 segundos). 🎉

A equipe fez algumas otimizações para reduzir a sobrecarga de desempenho de serialização, análise e desserialização durante a inicialização.

Haverá uma próxima postagem do blog de engenharia explicando a implementação em detalhes. Não perca as novidades!

Problema do Chromium: 1029427

Novas ferramentas de visualização de ângulo do CSS

O DevTools agora tem um suporte melhor para depuração de ângulo de CSS!

Ângulo de CSS

Quando um elemento HTML na sua página tem um ângulo de CSS aplicado (por exemplo, background: linear-gradient(angle, color-stop1, color-stop2), transform: rotate(angle)), um ícone de relógio é exibido ao lado do ângulo no painel "Estilos". Clique no ícone do relógio para alternar a sobreposição do relógio. Clique em qualquer parte do relógio ou arraste a agulha para mudar o ângulo!

Também há atalhos de mouse e teclado para mudar o valor do ângulo. Confira nossa documentação para saber mais.

Problemas do Chromium: 1126178, 1138633

Emular tipos de imagem não compatíveis

O DevTools adicionou duas novas emulações na guia "Renderização", permitindo que você desative os formatos de imagem AVIF e WebP. Essas novas emulações facilitam que os desenvolvedores testem diferentes cenários de carregamento de imagem sem precisar trocar de navegador.

Suponha que temos o seguinte código HTML para exibir uma imagem em AVIF e WebP para navegadores mais recentes, com uma imagem PNG substituta para navegadores mais antigos.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

Abra a guia Renderização, selecione "Desativar formato de imagem AVIF" e atualize a página. Passe o cursor sobre img src. O src da imagem atual (currentSrc) agora é a imagem WebP substituta.

Emular tipos de imagem

Problema do Chromium: 1130556

Simule o tamanho da cota de armazenamento no painel "Armazenamento"

Agora é possível substituir o tamanho da cota de armazenamento no painel "Armazenamento". Esse recurso permite simular diferentes dispositivos e testar o comportamento dos seus apps em cenários de baixa disponibilidade de disco.

Acesse Aplicativo > Armazenamento, ative a caixa de seleção Simular cota de armazenamento personalizada e insira um número válido para simular a cota.

Simular o tamanho da cota de armazenamento

Problemas do Chromium: 945786, 1146985

Nova faixa nas Métricas da Web nas gravações do Painel de desempenho

Os registros de desempenho agora têm uma opção para exibir informações das Métricas da Web.

Depois de registrar o desempenho do carregamento, marque a caixa de seleção Web Vitals no painel de desempenho para conferir a nova faixa.

No momento, a faixa mostra informações das Métricas da Web, como First Contentful Paint (FCP), Largest Contentful Paint (LCP) e Layout Shift (LS).

Acesse web.dev/vitals para saber mais sobre como otimizar a experiência do usuário com as métricas do Web Vitals.

Faixa das Métricas da Web

Problema do Chromium: N/D

Relatar erros de CORS no painel Network

O DevTools agora mostra um erro de CORS quando uma solicitação de rede falha devido ao compartilhamento de recursos entre origens (CORS).

No painel Rede, observe a falha na solicitação de rede CORS. A coluna de status mostra "Erro do CORS". Passe o cursor sobre o erro e a dica vai mostrar o código dele. Antes, o DevTools apenas mostrava o status genérico "(failed)" para erros de CORS.

Isso é a base das nossas próximas melhorias ao fornecer uma descrição mais detalhada dos problemas de CORS.

Erros de CORS

Problema do Chromium: 1141824

Atualizações da visualização de detalhes do frame

Informações de isolamento de origem cruzada na visualização de detalhes do frame

O status isolado de origem cruzada agora aparece na seção Segurança e isolamento.

A nova seção Disponibilidade da API mostra a disponibilidade de SharedArrayBuffers (SAB) e se eles podem ser compartilhados usando postMessage().

Um aviso de descontinuação será mostrado se a SAB e a postMessage() estiverem disponíveis, mas o contexto não tiver origens isoladas. Saiba mais sobre o isolamento de origem cruzada e por que ele será necessário para recursos como o SharedArrayBuffers neste artigo.

Informações de origem cruzada

Problema do Chromium: 1139899

Novas informações sobre Web Workers na visualização de detalhes do frame

O DevTools agora exibe web workers dedicados abaixo do frame que os cria.

No painel Aplicativo, expanda um frame com workers da Web e selecione um deles na árvore de Workers para conferir os detalhes.

Informações sobre web workers

Problemas do Chromium: 1122507, 1051466

Mostrar detalhes do frame de abertura para janelas abertas

Agora é possível visualizar os detalhes sobre qual frame causou a abertura de outra janela.

Selecione uma janela aberta na árvore Frames para conferir os detalhes dela. Clique no link Opener Frame para revelar a opção no painel "Elementos".

Detalhes do frame de abertura

Problema do Chromium: 1107766

Abrir o painel Network no painel Service Workers

Veja todas as informações de roteamento de solicitações de service worker (SW) com o novo link Solicitações de rede. Isso fornece aos desenvolvedores mais contexto ao depurar o SW.

Acesse Aplicativo > Service Workers e clique nas Solicitações de rede de um SW. O painel Rede é aberto no painel inferior e exibe todas as solicitações relacionadas ao service worker (as solicitações de rede são filtradas por "is:service-worker-intercepted").

Abrir o painel Network nos Service Workers

Problema do Chromium: N/D

Novas opções de cópia no painel Network

Copiar valor da propriedade

A nova opção Copiar valor no menu de contexto permite copiar o valor da propriedade de uma solicitação de rede.

Copiar valor da propriedade

No painel Network, clique em uma solicitação de rede para abrir o painel Headers. Clique com o botão direito do mouse em uma das propriedades nesta seção: Payload de solicitação (JSON) - Parâmetros de string de consulta dos dados do formulário. Os cabeçalhos da solicitação Cabeçalhos de resposta

Em seguida, selecione Copiar valor para copiar o valor da propriedade para a área de transferência.

Problema do Chromium: 1132084

Copiar stack trace para o iniciador da rede

Clique com o botão direito do mouse em uma solicitação de rede e selecione Copiar stack trace para copiar o stack trace para a área de transferência.

Copiar stack trace

Problema do Chromium: 1139615

Atualizações de depuração do Wasm

Visualizar o valor da variável Wasm ao passar o mouse

Ao passar o cursor sobre uma variável na desmontagem do WebAssembly (Wasm) enquanto está pausado em um ponto de interrupção, o DevTools agora mostra o valor atual da variável.

No painel Sources, abra um arquivo Wasm, coloque um ponto de interrupção e atualize a página. Passe o cursor sobre uma variável para ver o valor.

Visualizar variável Wasm ao passar o mouse

Problemas do Chromium: 1058836, 1071432

Avaliar a variável Wasm no console

Agora você pode avaliar a variável Wasm no console enquanto estiver pausado em um ponto de interrupção.

Neste exemplo, colocamos um ponto de interrupção na linha local.get $input. Ao depurar, digite $input no console para retornar o valor atual da variável, que é 4 nesse caso.

Avaliar a variável Wasm no console

Problema do Chromium: 1127914

Unidades consistentes de medida para tamanhos de arquivo/memória

O DevTools agora usa kB de forma consistente para mostrar tamanhos de arquivos/memória. Anteriormente, o DevTools misturava KB (1.000 bytes) e KiB (1.024 bytes). Por exemplo, o painel Network usava anteriormente rótulos "kB", mas realmente executava cálculos com o KiB, o que causava confusão desnecessária.

Problema do Chromium: 1035309

Destacar pseudoelementos no painel "Elementos"

O DevTools aumentou o contraste de cores dos pseudoelementos para ajudar você a identificá-los melhor.

Destacar pseudoelementos

Problema do Chromium: 1143833

Recursos experimentais

Ferramentas de depuração CSS Flexbox

As ferramentas de depuração do Flexbox estão chegando!

Para começar, o DevTools agora mostra um selo flex no painel "Elements" para elementos com display: flex aplicado a ele.

Além disso, novos ícones de alinhamento foram adicionados às seguintes propriedades do flexbox:

  • flex-direction
  • align-items
  • align-content
  • align-self
  • justify-items
  • justify-content

Além disso, esses ícones reconhecem o contexto. A direção do ícone será ajustada de acordo com:

  • flex-direction
  • direction
  • writing-mode

O objetivo desses ícones é ajudar a visualizar melhor o layout flexbox da página.

Depuração CSS Flex

Consulte o documento de design (em inglês) dos recursos de ferramentas do Flexbox. Mais recursos serão adicionados em breve.

Faça um teste e conte-nos o que você achou.

Problemas do Chromium: 1144090, 1139945

Personalizar atalhos de teclado dos acordes

O DevTools adicionou suporte experimental a atalhos de teclado personalizados desde a última versão.

Agora é possível criar acordes (também conhecidos como atalhos de várias teclas pressionadas) no editor de atalhos.

Acesse Configurações > Atalhos, passe o cursor sobre um comando e clique no botão Editar (ícone de caneta) para personalizar o atalho dos acordes.

Atalhos do teclado do Chat em grupo

Problema do Chromium: 174309

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