Novidades do DevTools (Chrome 84)

Corrigir problemas do site com a nova guia "Problemas"

A nova guia Problemas no painel tem como objetivo reduzir a fadiga de notificações e a desordem do Console. No momento, o console é o local central para desenvolvedores de sites, bibliotecas, frameworks e o próprio Chrome registrarem mensagens, avisos e erros. A guia "Problemas" apresenta avisos do navegador de maneira estruturada, agregada e prática, links para recursos afetados no DevTools e orientações sobre como corrigir os problemas. Com o tempo, mais e mais 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 "Problemas" do Chrome DevTools para começar.

Bug do Chromium: #1068116

Ver 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 é focado pelo teclado.

Bug do Chromium: #1040025

Atualizações do painel de performance

Ver informações sobre o tempo total de bloqueio (TBT) no rodapé

Depois de gravar a performance de carregamento, o painel "Performance" mostra as informações de 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. Ela mede essencialmente quanto tempo uma página parece estar utilizável (porque o conteúdo foi renderizado na tela), mas não está 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. O TBT é a principal métrica de laboratório para aproximar o First Input Delay, que é uma das novas Core Web Vitals do Google.

Para receber informações sobre o tempo total de bloqueio, não use o fluxo de trabalho Recarregar página para registrar o desempenho do carregamento da página. Em vez disso, clique em Gravar , atualize a página manualmente, aguarde o carregamento e pare a gravação. Se você vir Total Blocking Time: Unavailable, isso significa que o DevTools não recebeu as informações necessárias dos dados de criação de perfil internos do Chrome.

Bug do Chromium: #1054381

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

A nova seção Experiência do painel "Performance" ajuda a detectar mudanças de layout. O Cumulative Layout Shift (CLS) é uma métrica que ajuda 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 Movido de e Movido para para visualizar onde ocorreu a mudança de layout.

Terminologia de promessa mais precisa no console

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

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

Bug do V8: #6751

Atualizações do painel "Estilos"

Suporte para a palavra-chave revert

A interface de usuário 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 que seria se não tivessem sido feitas mudanças no estilo do elemento.

Bug do Chromium: #1075437

Prévias de imagens

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

Bug do Chromium: #1040019

O seletor de cores agora usa a notação de cores funcionais separadas 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).

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

Você também vai encontrar a sintaxe no painel "Calculado" e na dica da ferramenta "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 separada por vírgula descontinuada.

A sintaxe de argumentos separados por espaços é 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 "Manifesto"

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

Confira Faça tudo mais rápido com atalhos de apps para saber mais.

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.