Novidades do DevTools (Chrome 88)

Jecelyn Yeen

Inicialização mais rápida do DevTools

A inicialização do DevTools agora é cerca de 37% mais rápida em termos de compilação de JavaScript (de 6,9 segundos 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.

Em breve, vamos publicar uma postagem no blog de engenharia explicando a implementação em detalhes. Não perca!

Problema do Chromium: 1029427

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

O DevTools agora tem um suporte melhor para a depuração de ângulos CSS.

Ângulo de CSS

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

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 imagens sem precisar mudar de navegador.

Suponha que tenhamos 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 o img src. O src da imagem atual (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 substituir o tamanho da cota de armazenamento no painel "Armazenamento". Esse recurso permite simular diferentes dispositivos e testar o comportamento dos 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 de Web Vitals nas gravações do painel "Performance"

As gravações de performance agora têm uma opção para mostrar informações dos Web Vitals.

Depois de registrar o desempenho de carregamento, ative a caixa de seleção Web Vitals no painel "Performance" para conferir a nova faixa das Core Web Vitals.

Atualmente, a faixa mostra informações das Core Web Vitals, 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/A

Informar erros do CORS no painel de 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 solicitação de rede CORS com falha. A coluna de status mostra "Erro do CORS". Passe o cursor sobre o erro. A dica agora mostra o código de erro. Antes, o DevTools apenas mostrava o status genérico "(failed)" para erros de CORS.

Isso é a base para nossos próximos aprimoramentos na descrição mais detalhada dos problemas de CORS.

Erros de CORS

Problema do Chromium: 1141824

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

Informações sobre o isolamento entre origens na visualização de detalhes do frame

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

A nova seção Disponibilidade da API mostra a disponibilidade de SharedArrayBuffers (SAB, na sigla em inglês) e se eles podem ser compartilhados usando postMessage().

Um aviso de descontinuação vai aparecer se o SAB e o postMessage() estiverem disponíveis, mas o contexto não estiver isolado entre origens. Saiba mais sobre o isolamento entre origens e por que ele será necessário para recursos como SharedArrayBuffers neste artigo.

Informações entre origens

Problema do Chromium: 1139899

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

Agora, o DevTools mostra workers da Web dedicados abaixo do frame que os cria.

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

Informações sobre workers da Web

Problemas do Chromium: 1122507, 1051466

Mostrar detalhes do frame de abertura para janelas abertas

Agora você pode conferir 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 o opener no painel "Elements".

Detalhes do frame de abertura

Problema do Chromium: 1107766

Abrir o painel de rede no painel de service workers

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

Acesse Aplicativo > Service Workers e clique nas Solicitações de rede de um SW. O painel Network é aberto no painel de baixo, mostrando todas as solicitações relacionadas ao service worker. As solicitações de rede são filtradas por "is:service-worker-intercepted".

Abrir o painel de rede dos service workers

Problema do Chromium: N/A

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 Rede, clique em uma solicitação de rede para abrir o painel Cabeçalhos. 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 de formulário Cabeçalhos de 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 stacktrace para iniciador de rede

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

Copiar stacktrace

Problema do Chromium: 1139615

Atualizações de depuração do Wasm

Visualizar o valor da variável Wasm ao passar o cursor sobre ela

Ao passar o cursor sobre uma variável na desmontagem do WebAssembly (Wasm) enquanto ela está pausada 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 conferir o valor.

Visualizar a variável Wasm ao passar o cursor sobre ela

Problemas do Chromium: 1058836, 1071432

Avaliar a variável Wasm no console

Agora é possível avaliar a variável Wasm no console enquanto ele está 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 neste caso.

Avaliar a variável Wasm no console

Problema do Chromium: 1127914

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

Agora, as DevTools usam consistentemente kB para mostrar os tamanhos de arquivo/memória. Antes, as Ferramentas do desenvolvedor misturavam 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 do Flexbox do CSS

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

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

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 são contextuais. A direção do ícone será ajustada de acordo com:

  • flex-direction
  • direction
  • writing-mode

Esses ícones têm como objetivo ajudar você a visualizar melhor o layout flexbox da página.

Depuração do CSS Flex

Confira a documentação de design dos recursos de ferramentas do Flexbox. Mais recursos serão adicionados em breve.

Faça um teste e dê sua opinião!

Problemas do Chromium: 1144090, 1139945

Personalizar atalhos de teclado para acordes

Desde a versão anterior, o DevTools adicionou suporte experimental para personalizar atalhos de teclado.

Agora é possível criar acordes (também conhecidos como atalhos de vários pressionamentos de tecla) 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 de acordes.

Atalhos do teclado do Chat em grupo

Problema do Chromium: 174309

Fazer o download dos canais de visualização

Considere usar o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada ao DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades no DevTools.