Novidades do DevTools (Chrome 91)

Jecelyn Yeen

As informações do Web Vitals aparecem no painel "Performance"

Passe o cursor sobre um marcador das Principais métricas da Web no painel Performance para entender o que o indicador significa: se a performance é boa, precisa de melhorias ou é ruim.

Pop-up de informações das Métricas da Web

Problema do Chromium: 1147872

Visualizar a quebra de rolagem do CSS

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

CSS scroll-snap

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 selo para alternar a exibição de uma sobreposição de rolagem na página.

No exemplo acima, você pode ver marcas de pontos nas bordas de ajuste. O porto de rolagem tem contorno sólido, enquanto os itens de ajuste têm contornos de traço. O padding de rolagem é preenchido em verde, enquanto a margem de rolagem é preenchida em laranja.

Problema do Chromium: 862450

Novo Inspetor de memória

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 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 depurador à direita. Observe o novo ícone ao lado do valor buffer. Clique nele para revelar o Memory Inspector.

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

Inspetor de memória

Problema do Chromium: 1166577

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

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

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

No painel Elementos, clique com o botão direito do mouse em qualquer elemento. 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 de imagem aprimorada com informações sobre a proporção

As visualizações de imagem 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.

Prévia da imagem com informações sobre a proporção

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

Informações sobre a proporção da imagem no painel de rede

Problemas do Chromium: 1149832, 1170656

Botão de novas condições de rede com opções para configurar Content-Encodings

Um novo botão de condições de rede foi adicionado no 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 são codificadas corretamente em navegadores que não oferecem suporte a gzip, brotli ou outros Content-Encodings futuros.

Botão "New network conditions" com opções para configurar o Content-Encoding

Problema do Chromium: 1162042

Melhorias no painel de estilos

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

Agora você pode clicar com o botão direito do mouse em uma propriedade CSS no painel Styles e selecionar View computed value para conferir o valor de CSS calculado.

Novo atalho para conferir o valor calculado

Problema do Chromium: 1076198

Suporte para a palavra-chave accent-color

A interface de preenchimento automático do painel "Styles" agora detecta a palavra-chave CSS accent-color, que permite que os desenvolvedores da Web especifiquem a cor de destaque para os controles de interface (por exemplo, caixa de seleção, botão de rádio) gerados pelo elemento.

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

accent-color

Problema do Chromium: 1092093

Categorizar tipos de problemas com cores e ícones

A guia Issues agora categoriza problemas em erros de página, mudanças importantes futuras 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 cabeçalhos CORS corretos etc.
  • Mudanças importantes futuras (amarelo). Problemas que informam sobre uma mudança futura e incompatível da plataforma da Web que pode resultar na perda da funcionalidade da página (por exemplo, aviso de mudanças futuras do CORS RFC 1918).
  • Possíveis melhorias (azul). Possíveis melhorias na página, mas que não prejudicam a funcionalidade básica da página (por exemplo, problemas de acessibilidade)

Categorizar tipos de problemas com cores e ícones

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, 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 começar a usar os Trust Tokens.

Excluir tokens de confiança

Problema do Chromium: 1126824

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

Agora é possível 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 demonstração. Acesse o painel Application e selecione um frame. Na seção Política de permissões, role a tela 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 da plataforma da Web que permite que um site permita ou bloqueie o uso de recursos do navegador no próprio frame ou em iframes incorporados.

Recursos bloqueados na visualização de detalhes do frame

Problema do Chromium: 1158827

Filtrar experimentos na configuração "Experimentos"

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

Filtrar experimentos na configuração "Experimentos"

Nova coluna Vary Header no painel "Armazenamento do cache"

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

Variar coluna de cabeçalho

Problema do Chromium: 1186049

Melhorias no painel de origens

Suporte a novos recursos do JavaScript

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

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

Teste no Console e no painel Fontes. Você também pode inspecionar os campos privados na seção Escopo do painel Desenvolvedor de software.

Verificações de marca privada do JavaScript

Problema do Chromium: 11374

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

Agora, as ferramentas de desenvolvimento definem pontos de interrupção em vários scripts corretamente. Os bundlers modernos de JavaScript (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ão 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 pontos de interrupção em todos os locais relevantes corretamente.

Problemas do Chromium: 1142705, 979000, 1180794

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

Agora, o DevTools oferece suporte à visualização de passar o cursor sobre expressões de membro JavaScript que usam a notação [] no painel Sources.

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

Problema do Chromium: 1178305

Melhoria no esboço de arquivos HTML

O DevTools agora tem um melhor suporte de esboço para arquivos HTML. No painel Origens, abra um arquivo HTML. É possível ativar 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 esboço. Antes, as DevTools mostravam apenas algumas das funções.

Melhoria no esboço de arquivos HTML

Problema do Chromium: 761019, 1191465

Stack traces de erro 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 de Wasm.

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

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

A versão antiga do Chrome à esquerda não mostra o local de origem (por exemplo, dsquare) nos rastros de pilha de erros, 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 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.