Novidades do DevTools (Chrome 91)

As informações das Web Vitals aparecem no painel "Desempenho".

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

Problema do Chromium: 1147872

Visualizar o CSS scroll-snap

Agora você pode ativar ou desativar 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 demonstração) tem scroll-snap-type aplicado, um selo scroll-snap aparece ao lado dele no painel Elementos. Clique no ícone para ativar ou desativar a exibição de uma sobreposição de ajuste de rolagem na página.

No exemplo acima, você pode 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 tracejados. O padding de rolagem é preenchido com a cor verde, enquanto a margem de rolagem é preenchida com a cor laranja.

Problema do Chromium: 862450

Novo Memory Inspector

Use o novo Memory Inspector para inspecionar um ArrayBuffer em JavaScript, bem como a memória Wasm.

Abra esta página de demonstração. No painel Fontes, 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 depurador à direita. Observe o novo ícone ao lado do valor do buffer. Clique nele para abrir o Memory Inspector.

Consulte a documentação para saber mais sobre como inspecionar JavaScript ArrayBuffer e WebAssembly.Memory com esse novo Memory Inspector.

Problema do Chromium: 1166577

Novo painel de configurações de selos no painel "Elementos"

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

No painel Elementos, clique com o botão direito do mouse em qualquer elemento. Selecione Configurações de selo no menu de contexto. O painel de configurações de selo vai aparecer na parte de cima. Marque ou desmarque qualquer caixa de seleção para mostrar/ocultar os selos.

Problema do Chromium: 1066772

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

As prévias de imagens no painel Elementos agora mostram mais informações sobre a imagem: tamanho renderizado, proporção renderizada, tamanho intrínseco, proporção intrínseca e tamanho do arquivo.

Essas informações ajudam você a entender melhor suas imagens e aplicar a 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 para testar se as respostas do servidor estão codificadas corretamente em navegadores que não são compatíveis com gzip, brotli ou outros Content-Encodings futuros.

Problema do Chromium: 1162042

Melhorias no painel "Estilos"

Novo atalho para ver o valor calculado no painel "Estilos"

Agora, clique com o botão direito do mouse em uma propriedade CSS no painel Estilos e selecione Ver valor calculado para conferir o valor calculado do CSS.

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 que desenvolvedores da Web especifiquem a cor de destaque para controles de interface (por exemplo, caixa de seleção, botão de opção) gerados pelo elemento.

A propriedade CSS accent-color está em fase experimental. Ative chrome://flags/#enable-experimental-web-platform-features para testar.

Problema do Chromium: 1092093

Categorizar tipos de problemas com cores e ícones

A guia Problemas agora categoriza os problemas em erros de página, próximas mudanças interruptivas e possíveis melhorias para uma melhor indicação de gravidade. Para abrir a guia Problemas, clique no botão contagem de problemas no Console.

• Erros de página (vermelho). Problemas que têm impacto imediato na funcionalidade da página, como não definir os cabeçalhos CORS corretos etc.
• Próximas mudanças importantes (amarelo). Problemas que informam sobre uma mudança incompatível na plataforma da Web que pode resultar na perda da funcionalidade da página (por exemplo, aviso sobre as próximas mudanças na RFC 1918 do CORS).
• Possíveis melhorias (azul). Possíveis melhorias na página, mas que não prejudicam a funcionalidade básica dela (por exemplo, problemas de acessibilidade)

Problema do Chromium: 1183241

Excluir tokens de confiança

Agora é possível excluir tokens confiáveis com o novo botão de exclusão no painel Tokens confiáveis, em Application.

O Trust Token é uma nova API que ajuda a combater fraudes e distinguir bots de pessoas reais, sem rastreamento passivo. Saiba como começar a usar os Trust Tokens.

Problema do Chromium: 1126824

Ver detalhes sobre recursos bloqueados na visualização "Detalhes do frame"

Agora é possível conferir detalhes sobre os recursos bloqueados na seção Política de permissões da visualização de detalhes do frame.

Abra esta página de demonstração. Acesse o painel Application 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 navegar até 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 permite que um site autorize ou bloqueie o uso de recursos do navegador no próprio frame ou em iframes incorporados.

Problema do Chromium: 1158827

Filtrar experimentos na configuração "Experimentos"

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

Nova coluna Vary Header no painel "Armazenamento em cache"

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

Problema do Chromium: 1186049

Melhorias no painel "Origens"

Suporte para novos recursos do JavaScript

O DevTools agora é compatível com o novo recurso de linguagem JavaScript verificação de marca particular, também conhecido como #foo in obj.

Esse recurso de verificação de marca particular estende o operador in para oferecer suporte ao teste de campos de classe particulares em qualquer objeto.

Teste no painel Console e Fontes. Você também pode inspecionar os campos particulares na seção Escopo no painel do depurador.

Problema do Chromium: 11374

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

Agora, o DevTools define pontos de interrupção corretamente em vários scripts. Os bundlers JavaScript modernos (por exemplo, Webpack, Rollup) oferecem suporte ao 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ó conseguia definir pontos de interrupção em um local bruto. Com essa melhoria mais recente, o DevTools pode definir pontos de interrupção em todos os locais relevantes corretamente.

Problemas do Chromium: 1142705, 979000, 1180794

Compatibilidade com visualização ao passar o cursor com a notação []

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

Problema do Chromium: 1178305

Melhoria no contorno de arquivos HTML

O DevTools agora tem um suporte melhor para contornos em arquivos HTML. No painel Origens, abra um arquivo HTML. É possível ativar ou desativar 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 só mostrava algumas das funções.

Problema do Chromium: 761019, 1191465

Stack traces de erros adequados para depuração do Wasm

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

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

A versão antiga do Chrome à esquerda não mostra o local da origem (por exemplo, dsquare) nos rastreamentos de pilha de erros, enquanto a nova versão à direita mostra.

Problema do Chromium: 1189161

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.