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 na gaveta é reduzir o cansaço e o excesso de notificações do Console. No momento, o Console é o lugar 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 útil, links para os recursos afetados no DevTools e orientações sobre como corrigir os problemas. Com o tempo, cada vez mais avisos do Chrome serão exibidos na guia "Problemas" em vez do console, o que ajuda a reduzir a sobrecarga do console.

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

A guia "Problemas".

Bug do Chromium: #1068116

Conferir informações de acessibilidade na dica do Inspect Mode

A dica do Modo de inspeção agora indica se o elemento tem um nome e uma função acessíveis e se é com foco no teclado.

Dica do Inspect Mode com informações de acessibilidade.

Bug do Chromium: #1040025

Atualizações do painel de desempenho

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

Depois de registrar o desempenho de carregamento, o painel de desempenho agora mostra as informações do Tempo total de bloqueio (TBT, na sigla em inglês) no rodapé. Essa métrica é uma métrica de desempenho de carregamento que ajuda a quantificar quanto tempo uma página leva para se tornar utilizável. Essencialmente, ela 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. O TBT é a principal métrica de laboratório para aproximar a latência na primeira entrada, 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 a página manualmente, aguarde o carregamento e pare a gravação. Se você vir Total Blocking Time: Unavailable, significa que o DevTools não recebeu as informações necessárias dos dados internos de criação de perfil do Chrome.

Informações do tempo total de bloqueio no rodapé de um registro do painel de desempenho.

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" pode ajudar a detectar mudanças de layout. A Mudança de layout cumulativa (CLS, na sigla em inglês) é 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 Summary. Passe o cursor sobre os campos Movido de e Movido para para ver onde a mudança de layout ocorreu.

Detalhes de uma mudança de layout.

Terminologia de promessa mais precisa no Console

Ao registrar um Promise, o console é usado para descrever incorretamente o estado do Promise como resolved:

Um exemplo do console que usa a terminologia "resolvida" anterior.

O console agora usa o termo fulfilled, alinhado à especificação Promise:

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

Bug do V8: #6751

Atualizações do painel "Styles"

Suporte para a palavra-chave revert

A interface de preenchimento automático do painel Styles 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.

Definir o valor de uma propriedade a ser revertida.

Bug do Chromium: #1075437

Visualizações de imagens

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

Passe 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 de 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).

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

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

Também é possível conferir a sintaxe no painel Computed e a dica do Inspect Mode.

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 argumentos separada por vírgulas descontinuada.

A sintaxe do argumento separado por espaços é compatível com a maioria dos navegadores há algum tempo. Consulte Posso usar notações de cor 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 "Properties" que foi descontinuado.

Referências:

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

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

Atalhos de apps no painel "Manifesto".

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 oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

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

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59