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 JavaScript (de 6,9 segundos para 5 segundos). 🎉

A equipe fez algumas otimizações para reduzir a sobrecarga de desempenho da serialização, da análise e da 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 CSS

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

Quando um elemento HTML na sua 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 aparece ao lado do ângulo no painel "Estilos". Clique no ícone de relógio para ativar ou desativar a sobreposição. Clique em qualquer lugar no relógio ou arraste o ponteiro para mudar o ângulo.

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

Problemas do Chromium: 1126178, 1138633

Emular tipos de imagens não aceitos

O DevTools adicionou duas novas emulações na guia "Renderização", permitindo desativar os formatos de imagem AVIF e WebP. Com essas novas emulações, os desenvolvedores podem testar diferentes cenários de carregamento de imagens sem precisar mudar de navegador.

Suponha que temos o seguinte código HTML para veicular 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. A origem da imagem atual (currentSrc) agora é a imagem WebP substituta.

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". Com esse recurso, é possível simular diferentes dispositivos e testar o comportamento dos apps em cenários de baixa disponibilidade de disco.

Acesse Application > Storage, marque a caixa de seleção Simulate custom storage quota e insira qualquer número válido para simular a cota de armazenamento.

Problemas do Chromium: 945786, 1146985

Nova faixa de Web Vitals nas gravações do painel de desempenho

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

Depois de gravar o desempenho de carregamento, marque a caixa de seleção Métricas da Web no painel "Performance" para ver a nova faixa de Métricas da Web.

No momento, a faixa mostra informações sobre as 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.

Problema do Chromium: N/A

Informar erros de CORS no painel de rede

Agora, o DevTools 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 "Status" mostra "Erro de CORS". Passe o cursor sobre o erro. A dica de ferramenta agora mostra o código de erro. Antes, o DevTools só mostrava o status genérico "(falhou)" para erros de CORS.

Isso estabelece a base para nossas próximas melhorias na descrição mais detalhada dos problemas de CORS.

Problema do Chromium: 1141824

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

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

O status isolado de origem cruzada agora é exibido 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 postMessage() estiverem disponíveis, mas o contexto não estiver isolado de origem cruzada. Saiba mais sobre o isolamento entre origens e por que ele será necessário para recursos como SharedArrayBuffers neste artigo.

Problema do Chromium: 1139899

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

Agora, o DevTools mostra os web workers dedicados no frame que os cria.

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

Problemas do Chromium: 1122507, 1051466

Mostrar detalhes do frame de abertura para janelas abertas

Agora é possível ver 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 Frame de abertura para revelar o abridor no painel "Elementos".

Problema do Chromium: 1107766

Abrir o painel "Rede" no painel "Service Workers"

Confira todas as informações de roteamento de solicitações do 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 em Solicitações de rede de um SW. O painel Rede é aberto no painel inferior, mostrando todas as solicitações relacionadas ao service worker. As solicitações de rede são filtradas por "is:service-worker-intercepted".

Problema do Chromium: N/A

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.

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 nas seções: "Payload da solicitação (JSON)", "Parâmetros de string de consulta de dados do formulário", "Cabeçalhos da solicitação" e "Cabeçalhos da 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 o 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 na área de transferência.

Problema do Chromium: 1139615

Atualizações de depuração do Wasm

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

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

No painel Fontes, 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.

Problemas do Chromium: 1058836, 1071432

Avaliar a variável Wasm no console

Agora você pode avaliar a variável Wasm no console enquanto está em pausa 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.

Problema do Chromium: 1127914

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

O DevTools agora usa consistentemente kB para mostrar tamanhos de arquivo/memória. Antes, o DevTools misturava kB (1.000 bytes) e KiB (1.024 bytes). Por exemplo, o painel "Rede" usava rótulos "kB", mas realizava cálculos usando KiB, o que causava confusão desnecessária.

Problema do Chromium: 1035309

Destacar pseudoelementos no painel "Elementos"

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

Problema do Chromium: 1143833

Recursos experimentais

Ferramentas de depuração do CSS Flexbox

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 a eles.

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 sensíveis ao 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.

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

Faça um teste e conte para nós o que você achou.

Problemas do Chromium: 1144090, 1139945

Personalizar atalhos de teclado de acordes

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

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

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

Problema do Chromium: 174309

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

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.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

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