Novidades do DevTools (Chrome 84)

Kayce Basques

Corrigir problemas do site com a nova guia "Problemas"

A nova guia Issues na gaveta tem como objetivo reduzir a fadiga de notificações e a desorganização do Console. Atualmente, o console é o local central para desenvolvedores de sites, bibliotecas, frameworks e o próprio Chrome registrarem mensagens, avisos e erros. A guia "Issues" apresenta avisos do navegador de maneira estruturada, agregada e acionável, links para recursos afetados no DevTools e orientações sobre como corrigir os problemas. Com o tempo, mais e mais dos avisos do Chrome vão aparecer na guia "Problemas", em vez do console, o que vai ajudar a reduzir a desordem do console.

Confira Encontrar e corrigir problemas com a guia "Issues" do Chrome DevTools para começar.

Bug do Chromium: #1068116

Conferir informações de acessibilidade na dica do modo de inspeção

A dica do modo de inspeção agora indica se o elemento tem um nome e uma função acessíveis e se é focalizável pelo teclado.

Bug do Chromium: #1040025.

Atualizações do painel de desempenho

Conferir informações sobre o tempo total de bloqueio (TBT, na sigla em inglês) no rodapé

Depois de registrar a performance de carregamento, o painel "Performance" agora mostra informações sobre o Tempo total de bloqueio (TBT, na sigla em inglês) no rodapé. O TBT é uma métrica de desempenho de carregamento que ajuda a quantificar quanto tempo leva para uma página ficar utilizável. Ele mede essencialmente quanto tempo uma página parece estar utilizável (porque o conteúdo dela foi renderizado na tela), mas não está realmente utilizável porque o JavaScript está bloqueando a linha de execução principal e, portanto, a página não pode responder à entrada do usuário. A TBT é a principal métrica de laboratório para aproximar o First Input Delay, que é uma das novas Core Web Vitals do Google.

Para conferir informações sobre o tempo de bloqueio total, não use o fluxo de trabalho Reload Page para gravar a performance de carregamento da página. Em vez disso, clique em Gravar , atualize a página manualmente, aguarde o carregamento e interrompa a gravação. Se você encontrar Total Blocking Time: Unavailable, significa que o DevTools não recebeu as informações necessárias dos dados de perfil interno do Chrome.

Bug do Chromium: #1054381

Eventos de layout shift na nova seção "Experiência"

A nova seção Experiência do painel "Performance" pode ajudar a detectar mudanças de layout. O Cumulative Layout Shift (CLS) é uma métrica que pode ajudar a quantificar a instabilidade visual indesejada e é uma das novas Core Web Vitals do Google.

Clique em um evento de mudança de layout para conferir os detalhes na guia Resumo. Passe o cursor sobre os campos Mudou de e Mudou para para visualizar onde a mudança de layout ocorreu.

Terminologia de promessa mais precisa no console

Ao registrar um Promise, o console usava incorretamente o estado do Promise como resolved:

O console agora usa o termo fulfilled, que está alinhado com a especificação Promise:

Bug do V8: #6751

Atualizações do painel de estilos

Suporte para a palavra-chave revert

A interface de preenchimento automático do painel Estilos agora detecta a palavra-chave CSS revert, que reverte o valor em cascata de uma propriedade para o valor que seria se nenhuma mudança tivesse sido feita no estilo do elemento.

Bug do Chromium: #1075437

Prévias de imagens

Passe o cursor sobre um valor background-image no painel "Styles" para conferir uma prévia da imagem em uma dica.

Bug do Chromium: #1040019

O seletor de cores agora usa a notação de cores funcional separada por espaços

O Módulo de cor CSS nível 4 especifica que funções de cor como rgb() precisam oferecer suporte a argumentos separados por espaços. Por exemplo, rgb(0, 0, 0) equivale a rgb(0 0 0).

Quando você escolher cores com o Seletor de cores ou alternar entre representações de cores no painel Estilos pressionando Shift e clicando no valor da cor, você vai notar a sintaxe de argumento separada por espaços.

Você também vai encontrar a sintaxe no painel Computed e na dica de ferramenta do modo de inspeção.

O DevTools está usando a nova sintaxe porque os próximos recursos do CSS, como color(), não são compatíveis com a sintaxe de argumento separado por vírgulas descontinuada.

A sintaxe de argumento separada por espaços já é compatível com a maioria dos navegadores há algum tempo. Consulte Posso usar notações de cores funcionais separadas por espaços?

Bug do Chromium: #1072952

Descontinuação do painel Propriedades no painel "Elementos"

O painel Propriedades no painel Elementos foi descontinuado. Execute console.dir($0) no console.

Referências:

• console.dir()
• $0

Suporte a atalhos de apps no painel "Manifest"

Os atalhos de app ajudam os usuários a iniciar rapidamente tarefas comuns ou recomendadas em um app da Web. O menu de atalhos de app é mostrado apenas para Progressive Web Apps instalados no computador ou dispositivo móvel do usuário.

Confira Como fazer tudo rapidamente com os atalhos de apps para saber mais.

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.

• Envie feedback e solicitações de recursos para crbug.com.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

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