Novidades do DevTools (Chrome 88)

Inicialização mais rápida do DevTools

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

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

Haverá uma postagem de blog de engenharia com explicações detalhadas sobre a implementação. 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 a depuração de ângulo do CSS.

Ângulo de CSS

Quando um elemento HTML na sua página tem um ângulo de CSS aplicado a ele (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. Clique em qualquer lugar do relógio ou arraste a agulha para mudar o ângulo!

Há atalhos de mouse e teclado para mudar também 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 desativar os formatos de imagem AVIF e WebP. Essas novas emulações facilitam o teste de diferentes cenários de carregamento de imagens pelos desenvolvedores sem precisar trocar de navegador.

Suponha que tenhamos o código HTML a seguir para disponibilizar 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 Rendering, selecione "Desativar formato de imagem AVIF" e atualize a página. Passe o cursor sobre img src. O src atual da imagem (currentSrc) é agora a imagem WebP substituta.

Emular tipos de imagem

Problema do Chromium: 1130556

Simular o tamanho da cota de armazenamento no painel Armazenamento

Agora é possível modificar 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, marque a caixa de seleção Simular cota de armazenamento personalizada e insira qualquer número válido para simular a cota de armazenamento.

Simular o tamanho da cota de armazenamento

Problemas do Chromium: 945786 e 1146985

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

Agora as gravações de desempenho têm a opção de mostrar informações sobre as Métricas da Web.

Depois de registrar o desempenho de carregamento, ative a caixa de seleção Métricas da Web no painel de desempenho para conferir a nova faixa de Métricas da Web.

No momento, a faixa mostra informações das Métricas da Web, como Primeira exibição de conteúdo (FCP), Maior exibição de conteúdo (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 com o Chromium: N/D

Informar erros de CORS no painel Rede

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 do CORS. A coluna de status mostra "Erro de CORS". Passe o cursor sobre o erro, e a dica mostrará o código do erro. Antes, o DevTools só mostrava o status genérico "(failed)" para erros de CORS.

Isso estabelece a base para nossas próximas melhorias no fornecimento de descrições mais detalhadas dos problemas do 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 "Detalhes do frame"

O status de isolamento 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 vai aparecer se a SAB e a postMessage() estiverem disponíveis, mas o contexto não tem isolamento de origem cruzada. Saiba mais sobre o isolamento de origem cruzada e por que ele será necessário para recursos como SharedArrayBuffers neste artigo.

Informações de origem cruzada

Problema do Chromium: 1139899

Novas informações sobre Web Workers na visualização "Detalhes do frame"

O DevTools agora exibe workers da Web dedicados sob o frame que os cria.

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

Informações dos Web workers

Problemas do Chromium: 1122507, 1051466

Mostrar detalhes do frame de abertura para janelas abertas

Agora você pode ver 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 mostrar o abridor no painel Elements.

Detalhes do frame que abre

Problema do Chromium: 1107766

Abrir o painel Network no painel Service Workers

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

Acesse Application > Service Workers, clique nas Network requests de um SW. O painel Rede é aberto no painel inferior, exibindo 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 com o Chromium: N/D

Novas opções de cópia no painel "Rede"

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 da seção: Parâmetros de string de consulta de dados de formulário da solicitação (JSON) Solicitar cabeçalhos de resposta de cabeçalhos

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 no 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 e 1071432

Avaliar a variável Wasm no console

Agora é possível avaliar a variável Wasm no console enquanto estiver pausada em um ponto de interrupção.

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

Avaliar a variável Wasm no console

Problema do Chromium: 1127914

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

O DevTools agora usa kB de maneira consistente para exibir tamanhos de arquivo/memória. Anteriormente, o DevTools misturava kB (1.000 bytes) e KiB (1.024 bytes). Por exemplo, o painel "Network" usava rótulos "kB", mas na verdade realizou cálculos usando o KiB, o que causou 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 do Flexbox CSS

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 são adicionados nas seguintes propriedades de 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

Esses ícones ajudam você a visualizar melhor o layout flexbox da página.

Depuração CSS Flex

Este é o documento de design dos recursos do Flexbox. Mais recursos serão adicionados em breve.

Teste e envie sua opinião.

Problemas do Chromium: 1144090, 1139945

Personalizar atalhos de teclado dos acordes

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

Agora você pode criar acordes (também conhecidos como atalhos de pressionamento de várias teclas) no editor de atalhos.

Acesse Settings > Shortcuts, passe o cursor sobre um comando e clique no botão Edit (ícone de caneta) para personalizar o atalho de acordes.

Atalhos de teclado dos Chats

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é-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