Novidades do DevTools (Chrome 91)

Pop-up de informações sobre as Métricas da Web no painel de desempenho

Passe o cursor sobre um marcador das Métricas da Web no painel Desempenho para entender o que é o indicador: se o desempenho é bom, precisa de melhorias ou ruim.

Problema do Chromium: 1147872

Visualizar o ajuste de rolagem do CSS

Agora é possível alternar o selo scroll-snap no painel Elementos para inspecionar o alinhamento de ajuste de rolagem do CSS.

Quando um elemento HTML na sua página (por exemplo, esta página de demo) tem scroll-snap-type aplicado, um selo scroll-snap aparece ao lado dele no painel Elementos. Clique no selo para alternar a exibição de uma sobreposição de ajuste de rolagem na página.

No exemplo acima, é possível ver marcas de pontos nas bordas de ajuste. A porta de rolagem tem um contorno sólido, enquanto os itens de ajuste têm contornos de traço. O padding da rolagem é preenchido com a cor verde, enquanto a margem de rolagem é preenchida em laranja.

Problema do Chromium: 862450

Novo inspetor de memória

Use o novo Inspetor de memória para inspecionar uma ArrayBuffer em JavaScript, assim como a memória Wasm.

Abra esta página de demonstração. No painel Sources, abra o arquivo demo-js.js e defina um ponto de interrupção na linha 18.

Atualize a página. Expanda a seção Escopo no painel de depurador à direita. Observe o novo ícone ao lado do valor de buffer. Clique nela para revelar o Memory Inspector (link em inglês).

Consulte a documentação para saber mais sobre como inspecionar ArrayBuffer e WebAssembly.Memory do JavaScript com esse novo inspetor de memória.

Problema do Chromium: 1166577

Novo painel de configurações do selo no painel Elementos

Agora é possível ativar ou desativar os selos nas configurações dos selos no painel Elementos. Use esse recurso para personalizar e manter o foco nos selos importantes ao inspecionar páginas da Web.

No painel Elementos, clique com o botão direito do mouse em qualquer um deles. Selecione Configurações do selo no menu de contexto. O painel de configurações do selo aparece na parte de cima. Ative ou desative qualquer caixa de seleção para mostrar/ocultar os selos.

Problema do Chromium: 1066772

Visualização aprimorada da imagem com informações de proporção

As visualizações no painel Elementos agora mostram mais informações sobre a imagem, como tamanho renderizado, proporção renderizada, tamanho intrínseco, proporção intrínseco e tamanho do arquivo.

Essas informações ajudam você a entender melhor suas imagens e aplicar otimização, se necessário.

As informações de proporção da imagem também estão disponíveis no painel Rede quando você clica para visualizar a imagem.

Problemas do Chromium: 1149832, 1170656

Novo botão de condições de rede com opções para configurar Content-Encodings

Um novo botão de condições de rede é adicionado ao painel Rede. Clique nele para abrir a guia Condições de rede.

Uma nova opção Codificações de conteúdo aceitas foi adicionada à guia Condições de rede. Configure-o para testar se as respostas do servidor estão codificadas corretamente em navegadores incompatíveis com gzip, brotli ou outras Content-Encodings futuras.

Problema do Chromium: 1162042

Melhorias no painel "Styles"

Novo atalho para visualizar o valor calculado no painel "Styles"

Agora você pode clicar com o botão direito do mouse em uma propriedade CSS no painel Estilos e selecionar Visualizar valor calculado para ver o valor CSS calculado.

Problema do Chromium: 1076198

Suporte para a palavra-chave accent-color

A interface de preenchimento automático do painel "Estilos" agora detecta a palavra-chave CSS accent-color, que permite aos desenvolvedores Web especificar a cor de destaque dos controles de interface (por exemplo, caixa de seleção, botão de opção) gerados pelo elemento.

A propriedade CSS accent-color está atualmente experimental. Ative o chrome://flags/#enable-experimental-web-platform-features para testá-lo.

Problema do Chromium: 1092093

Categorizar tipos de problemas com cores e ícones

A guia Problemas agora categoriza os problemas em erros de página, futuras alterações interruptivas e possíveis melhorias para uma melhor indicação da gravidade. Clique no botão de contagem de problemas no Console para abrir a guia Problemas.

• Erros de página (vermelho). Problemas com impacto imediato na funcionalidade da página, como a configuração de cabeçalhos CORS incorretos etc.
• Próximas alterações interruptivas (amarelo). Problemas que informam sobre uma mudança futura e incompatível da plataforma da Web que pode resultar em uma perda de funcionalidade da página (por exemplo, aviso sobre futuras mudanças no CORS RFC 1918).
• Possíveis melhorias (azul). Possíveis melhorias na página, mas que não estão prejudicando as funcionalidades básicas dela (por exemplo, problemas de acessibilidade)

Problema do Chromium: 1183241

Excluir tokens de confiança

Agora é possível excluir tokens de confiança com o novo botão "Excluir" no painel Tokens de confiança, no painel Aplicativo.

O Trust Token é uma nova API para ajudar a combater fraudes e distinguir bots de pessoas reais, sem rastreamento passivo. Saiba como usar os tokens de confiança.

Problema do Chromium: 1126824

Mais detalhes sobre os recursos bloqueados na visualização de detalhes do frame

Agora você pode conferir detalhes sobre os recursos bloqueados na seção Política de permissões na visualização de detalhes do frame.

Abra esta página de demo. Acesse o painel Aplicativo e selecione um frame. Na seção Política de permissões, role até a propriedade Recursos desativados. Clique em Mostrar detalhes para saber por que o recurso está bloqueado. Clique no ícone ao lado de cada política para acessar o iframe ou a solicitação de rede que bloqueou o recurso.

A política de permissões é uma API de plataforma da Web que dá a um site a capacidade de permitir ou bloquear o uso de recursos do navegador em um frame próprio ou em iframes que ele incorpora.

Problema do Chromium: 1158827

Filtrar experimentos na configuração "Experimentos"

Encontre experimentos mais rápido com o novo filtro de experimentos. Por exemplo, acesse Configurações > Experimentos, na caixa de texto Filtro, digite "contraste". para filtrar todos os experimentos com a palavra "contraste".

Nova coluna Vary Header no painel Armazenamento em cache

Use a nova coluna Vary Header no painel Armazenamento em cache para visualizar o cabeçalho de resposta HTTP Vary.

Problema do Chromium: 1186049

Melhorias no painel "Origens"

Compatibilidade com novos recursos do JavaScript

O DevTools agora oferece suporte ao novo recurso de linguagem JavaScript de verificação particular de marca, também conhecido como #foo in obj.

Esse recurso de verificações de marca particular estende o operador "in" para oferecer suporte aos testes de campos de classe particulares em qualquer objeto.

Teste no Console e no painel Fontes. Também é possível inspecionar os campos particulares na seção Escopo no painel do depurador também.

Problema do Chromium: 11374

Suporte aprimorado para depuração de pontos de interrupção

O DevTools agora define corretamente os pontos de interrupção em vários scripts. Os bundlers de JavaScript modernos (por exemplo, Webpack, Rollup) são compatíveis com o recurso de divisão de código. Há cenários em que um componente compartilhado pode ser incluído em várias rotas (divisões de código).

Antes, o DevTools só podia definir pontos de interrupção em um local bruto. Com essa melhoria mais recente, o DevTools pode definir corretamente pontos de interrupção em todos os locais relevantes.

Problemas do Chromium: 1142705, 979000 e 1180794

Suporte à visualização ao passar o cursor usando a notação [].

O DevTools agora oferece suporte à visualização ao passar o cursor em expressões de membros do JavaScript que usam a notação [] no painel Sources.

Problema do Chromium: 1178305

Descrição aprimorada de arquivos HTML

O DevTools agora tem suporte a contornos melhor para arquivos HTML. No painel Origens, abra um arquivo HTML. É possível alternar o contorno do código com o teclado Cmd + Shift + O no Mac ou Ctrl + Shift + O no Windows.

No exemplo abaixo, o DevTools agora lista corretamente todas as funções no contorno. Antes, o DevTools mostrava apenas algumas das funções.

Problema do Chromium: 761019, 1191465

Rastreamentos de pilha de erros adequados para depuração do Wasm

O DevTools agora resolve chamadas de função inline e mostra rastreamentos de pilha de erro adequados para a depuração do Wasm.

Antes, o DevTools só exibia referências genéricas do Wasm nos stack traces de erro.

A versão antiga do Chrome à esquerda não mostra o local de origem (por exemplo, dsquare) nos stack traces de erro, enquanto a nova versão à direita mostra.

Problema do Chromium: 1189161

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