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!

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 relógio. é exibido ao lado do ângulo no painel "Estilos". Clique no ícone do relógio para alternar o relógio sobreposição. Clique em qualquer parte do relógio ou arraste a agulha para mudar o ângulo!

Há atalhos de mouse e teclado para mudar o valor do ângulo. Confira nosso 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 o AVIF e a imagem WebP. formatos. Essas novas emulações facilitam o teste de diferentes carregamentos de imagem para os desenvolvedores cenários sem precisar mudar de navegador.

Suponha que temos o seguinte código HTML 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 Renderização e selecione "Desativar formato de imagem AVIF" e atualize a página. Passe o cursor sobre o 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 oferece a capacidade de 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. insira um número válido para simular a cota de armazenamento.

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 Métricas da Web no painel de desempenho. para conferir a nova faixa das Métricas da Web.

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 a Web Métricas de métricas.

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, na sigla em inglês).

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

Isso constitui a base de nossas próximas melhorias ao fornecer uma descrição mais detalhada do 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 coluna Segurança e isolamento.

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

Um aviso de descontinuação vai aparecer se a empresa que atende no local do cliente e a postMessage() estiverem disponíveis, mas o contexto não é isolado de origem cruzada. Saiba mais sobre o isolamento de origem cruzada e por que ele é obrigatória para recursos como 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 web workers e selecione um worker na Workers para visualizar os detalhes do worker da Web.

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 Guia de abertura Frame para revelar a opção de abertura 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, clique nas Solicitações de rede de um SW. A O painel Network está aberto na parte inferior exibindo todas as solicitações relacionadas ao service worker (o as solicitações de rede são filtradas por &quot;is:service-worker-intercepted&quot;).

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 rede solicitação.

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 de dados do formulário Cabeçalhos da solicitação 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 á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 você estiver 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 um 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 vai 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. KB misto anterior do DevTools (1.000 bytes) e KiB (1.024 bytes). Por exemplo, o painel Network anteriormente usava "kB" os rótulos, mas realmente executou cálculos usando 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 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, passando o cursor sobre um comando e clicando 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é-lançamento 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.
  • Informe um problema do DevTools usando Mais opções   Mais > Ajuda > Relate problemas no 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.