Novidades do DevTools (Chrome 84)

Kayce Basques
Kayce Basques
X GitHub Falha

Corrigir problemas do site com a nova guia "Problemas"

O objetivo da nova guia Issues da gaveta é ajudar a reduzir a fadiga das notificações e a confusão no 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 "Problemas" apresenta avisos do navegador de maneira estruturada, agregada e útil, inclui links para os recursos afetados no DevTools e oferece orientações sobre como corrigir os problemas. Com o tempo, cada vez mais avisos do Chrome serão exibidos na guia "Problemas", não no Console, o que ajuda a reduzir a sobrecarga 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 um nome e papel acessíveis e se é focado no 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 as informações do tempo total de bloqueio (TBT, na sigla em inglês) no rodapé. A TBT é uma métrica de desempenho de carregamento que ajuda a quantificar quanto tempo uma página leva para se tornar utilizável. Essencialmente, ele mede 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 é a principal métrica de laboratório para aproximar a First Input Delay, que é uma das novas Core Web Vitals do Google.

Para conferir informações sobre o tempo total de bloqueio, não use o fluxo de trabalho Atualizar página Recarregar a página para registrar o desempenho do carregamento da página. Em vez disso, clique em Record Gravar, recarregue manualmente a página, aguarde ela ser carregada e pare a gravação. Caso você veja Total Blocking Time: Unavailable, isso significa que o DevTools não recebeu as informações necessárias dos 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 pode ajudar 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. Passe o 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 a antiga terminologia "resolvido".

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

Um exemplo do console usando a nova terminologia "atendido".

Bug do V8: #6751

Atualizações do painel "Estilos"

Suporte para a palavra-chave revert

Agora, a interface de preenchimento automático do painel "Estilos" 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.

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 cores 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 as representações de cores no painel "Estilos", segurando a tecla Shift e clicando no valor da cor, você vai encontrar a sintaxe do argumento separado por espaços.

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 a sintaxe descontinuada de argumentos separados por vírgulas.

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

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 menu de atalhos de apps é mostrado apenas para Progressive Web Apps instalados no computador ou dispositivo móvel do usuário.

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é-visualização 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.
  • Para informar um problema do DevTools, use Mais opções   Mais   > Ajuda > Informar problemas do 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59