Novidades do DevTools (Chrome 84)

Kayce Basques
Kayce Basques
X GitHub Falha

Corrigir problemas do site com a nova guia "Problemas"

A nova guia Issues da gaveta ajuda a reduzir a fadiga das notificações e a desorganização na interface Console. Atualmente, o Console é o local central para desenvolvedores de sites, bibliotecas, e o próprio Chrome para registrar mensagens, avisos e erros. A guia "Problemas" apresenta avisos do navegador de forma estruturada, agregada e acionável, links para os avisos no DevTools e fornece orientações sobre como corrigir os problemas. Com o tempo, cada vez mais dos avisos do Chrome serão mostrados na guia "Problemas", não no console, o que pode ajudar o que facilita a organização do console.

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

Guia "Problemas".

Bug do Chromium: #1068116

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

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

Dica do modo de inspeção com informações de acessibilidade.

Bug do Chromium: #1040025

Atualizações do Painel de desempenho

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

Depois de registrar o desempenho do carregamento, o painel "Desempenho" agora mostra o Tempo total de bloqueio. (TBT) no rodapé. A TBT é uma métrica de desempenho de carregamento que ajuda a quantificar o tempo precisa de uma página para se tornar utilizável. Ele mede essencialmente por quanto tempo uma página parece ser utilizável (porque o conteúdo foi renderizado na tela), mas não é 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 é o laboratório principal métrica para aproximar a First Input Delay, que é uma das novas Core Web Vitals do Google.

Para acessar as informações do tempo total de bloqueio, não use a opção Atualizar página. Recarregar a página para registrar o desempenho de carregamento da página. Em vez disso, clique em Gravar Gravar, atualizar manualmente a página, aguardar o carregamento dela e parar a gravação. Se você vir Total Blocking Time: Unavailable significa que o DevTools não recebeu as informações necessárias dados internos de criação de perfil do Chrome.

Informações de tempo total de bloqueio no rodapé de uma gravação do painel de desempenho.

Bug do Chromium: #1054381

Eventos de Layout Shift na nova seção "Experiência"

A nova seção Experiência do painel de desempenho pode ajudar você a detectar mudanças de layout. A 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 Layout Shift para ver os detalhes da mudança de layout na guia Resumo. Passar cursor sobre os campos Movido de e Movido para para visualizar onde a mudança de layout ocorreu.

Os detalhes de uma troca de layout.

Terminologia de promessa mais precisa no Console

Ao registrar uma Promise, o console usou para descrever incorretamente o estado da Promise como resolved:

Um exemplo do Console usando o antigo "resolvido" terminologia.

O console agora usa o termo fulfilled, que alinha-se com a especificação Promise:

Um exemplo do console usando o novo valor "atendido" terminologia.

Bug do V8: #6751

Atualizações do painel "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 a em cascata de uma propriedade ao que o valor teria sido se nenhuma alteração tivesse sido feita à o estilo de um elemento.

Definição do valor de uma propriedade a ser revertida.

Bug do Chromium: #1075437

Prévias de imagens

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

Passar o cursor sobre um valor de imagem de plano de fundo.

Bug do Chromium: #1040019

O seletor de cores agora usa notação de cor 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ço. Por exemplo, rgb(0, 0, 0) equivale a rgb(0 0 0).

Quando você escolhe cores com o Seletor de cores ou alterna entre as representações de cores no No painel de estilos, mantenha a tecla Shift pressionada e clique no valor da cor. Agora, você verá a barra de espaço, .

Usar argumentos separados por espaço no painel "Styles".

Você também vai conferir a sintaxe no painel Computed e a dica 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 o descontinuamos a sintaxe de argumento separado por vírgula.

A sintaxe do argumento separado por espaço é suportada pela maioria dos navegadores há algum tempo. Consulte Posso usar Notações de cores funcionais separadas por espaço?

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.

O painel "Propriedades" descontinuado.

Referências:

Suporte a atalhos de apps no painel "Manifest"

Os atalhos de apps ajudam os usuários a iniciar rapidamente tarefas comuns ou recomendadas em um app da Web. O app é exibido somente para os Apps Web Progressivos que estão instalados na área de trabalho ou no dispositivo móvel.

Consulte Realizar tarefas rapidamente com atalhos de apps para saber mais.

Atalhos de apps no painel "Manifest".

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