Novidades do DevTools (Chrome 90)

Novas ferramentas de depuração de CSS flexbox

O DevTools agora tem ferramentas de depuração de CSS flexbox dedicadas!

Quando um elemento HTML em sua página tem display: flex ou display: inline-flex aplicados, você é possível ver o selo flex ao lado dele no painel Elementos. Clique no selo para alternar a exibição sobreposição flexível na página.

No painel Styles, clique no novo ícone ao lado do display: flex ou display: inline-flex para abrir o editor do Flexbox. O editor Flexbox fornece uma maneira rápida de editar as propriedades flexbox. Faça um teste!

Além disso, o painel Layout tem uma seção Flexbox, que exibe todos os elementos flexbox no página. É possível alternar a sobreposição de cada elemento.

Problemas do Chromium: 1166710, 1175699

Nova sobreposição de Core Web Vitals

Visualize e meça melhor o desempenho da página com a nova sobreposição de Core Web Vitals.

As Core Web Vitals são uma iniciativa do Google para fornecer orientações unificadas para indicadores de qualidade que são essenciais para oferecer uma ótima experiência do usuário na Web.

Abra o Menu de comando, execute o comando Show Rendering e ative a opção Core Web Caixa de seleção de métricas.

A sobreposição mostra:

• Maior exibição de conteúdo (LCP): mede o desempenho do carregamento. Para oferecer um bom usuário experiência do usuário, a LCP precisa ocorrer até 2,5 segundos após o início do carregamento da página.
• First Input Delay (FID): mede a interatividade. Para oferecer uma boa experiência do usuário, as páginas precisa ter uma FID de menos de 100 milissegundos.
• Cumulative Layout Shift (CLS, na sigla em inglês): avalia a estabilidade visual. Para oferecer um bom usuário as páginas precisam manter uma CLS menor que 0, 1.

Problema do Chromium: 1152089

Atualizações da guia "Problemas"

Contagem de problemas movida para a barra de status do console

Adicionamos um novo botão de contagem de problemas à barra de status do console para melhorar a visibilidade dos emite avisos. Isso substituirá a mensagem de problema no Console.

Problema do Chromium: 1140516

Informar problemas de Atividade na Web Confiável

A guia "Problemas" agora informa os problemas da Atividade confiável na Web. O objetivo disso é ajudar os desenvolvedores entender e corrigir os problemas de Atividade Confiável na Web de seus sites, melhorando a qualidade aplicativos conteinerizados.

Abra uma Atividade na Web confiável. Depois, abra a guia Problemas clicando em Contagem de problemas. na barra de status do Console para conferir os problemas. Assista a esta palestra de Andre para saber saber mais sobre como criar e implantar atividades confiáveis na Web.

Problema do Chromium: 1147479

Formatar strings como literais de string JavaScript (válidos) no Console

Agora, o Console formata as strings como literais de string JavaScript válidos. Antes, o Console não teria escape de aspas duplas ao imprimir strings.

Problema do Chromium: 1178530

Novo painel "Tokens de confiança" no painel "Aplicativo"

O DevTools agora exibe todos os tokens de confiança disponíveis no contexto de navegação atual na nova coluna Trust Tokens, no painel Application.

O Trust Token é uma nova API para ajudar a combater fraudes e distinguir bots de pessoas reais, sem passividade monitoramento. Saiba como usar os tokens de confiança.

Problema do Chromium: 1126824

Emular o recurso de gama de cores do CSS

A consulta de mídia color-gamut permite testar o intervalo aproximado de cores com suporte. pelo navegador e pelo dispositivo de saída. Por exemplo, se a consulta de mídia color-gamut: p3 corresponder, ela significa que o dispositivo do usuário é compatível com o espaço de cores Display-P3.

Abra o Menu de comando, execute o comando Show Rendering e configure a opção Emulate CSS menu suspenso de gama de cores do recurso de mídia.

Problema do Chromium: 1073887

Ferramentas aprimoradas de Progressive Web Apps

O DevTools agora mostra uma mensagem de aviso mais detalhada sobre a instalação de Progressive Web Apps (PWA). no Console, com um link para a documentação.

O painel Manifest agora mostra uma mensagem de aviso se a description do manifesto exceder 324. caracteres.

Além disso, o painel Manifest agora mostra uma mensagem de aviso se a captura de tela do PWA não mostrar atendem aos requisitos. Saiba mais sobre a propriedade capturas de tela do PWA e os requisitos dela. aqui.

Problema do Chromium: 1146450, 1169689, 965802

Nova coluna Remote Address Space no painel Network

Use a nova coluna Remote Address Space no painel Network para ver o espaço do endereço IP da rede. de cada recurso da rede.

Problema do Chromium: 1128885

Melhorias no desempenho

O desempenho dos carregamentos de página com o DevTools aberto foi aprimorado. Em alguns casos extremos, vimos 10 vezes e melhorias de desempenho.

O DevTools coleta stack traces e os anexa a mensagens do console ou tarefas assíncronas para uso posterior é consumido pelo desenvolvedor em caso de problemas. Como essa coleta precisa ser feita de forma síncrona, no mecanismo do navegador, a coleta lenta de stack trace pode atrasar significativamente a página com DevTools abertos. Conseguimos reduzir significativamente a sobrecarga da coleta de stack trace.

Não perca a postagem do blog de engenharia com mais detalhes sobre a implementação.

Problemas do Chromium: 1069425, 1077657

Exibir recursos permitidos/proibidos na visualização de detalhes do frame

A visualização de detalhes do frame agora mostra uma lista de recursos do navegador permitidos e proibidos controlados pelo Política de permissões.

A política de permissões é uma API de plataforma da Web que permite que um site permita ou bloqueie o uso de recursos do navegador em seu próprio frame ou em iframes que ele incorpora.

Problema do Chromium: 1158827

Nova coluna SameParty no painel "Cookies"

O painel "Cookies" no painel "Aplicativo" agora exibe o atributo SameParty dos cookies. A O atributo SameParty é um novo atributo booleano que indica se um cookie precisa ser incluído em solicitações para origens dos mesmos Conjuntos primários.

Problema do Chromium: 1161427

O suporte a fn.displayName não padrão foi descontinuado

O suporte ao fn.displayName não padrão foi descontinuado. Use fn.name.

Tradicionalmente, o Chrome oferece suporte à propriedade fn.displayName não padrão como uma forma de os desenvolvedores controlarem nomes de depuração para funções que aparecem em error.stack e na pilha do DevTools vestígios. No exemplo acima, a Pilha de chamadas mostrava anteriormente noLongerSupport.

Substitua fn.displayName pelo fn.name padrão, que se tornou configurável (usando o Object.defineProperty) no ECMAScript 2015 para substituir a propriedade fn.displayName não padrão.

O suporte para fn.displayName não era confiável e não era consistente entre os mecanismos do navegador. Ela diminui coleta de stack trace, um custo que os desenvolvedores sempre pagam, independentemente de usarem fn.displayName ou não.

Problema do Chromium: 1177685

Descontinuação de Don't show Chrome Data Saver warning no menu "Configurações"

A configuração Don't show Chrome Data Saver warning foi removida porque a Economia de dados do Chrome foi descontinuada.

Problema do Chromium: 1056922

Recursos experimentais

Relatório automático de problemas de baixo contraste na guia "Problemas"

O DevTools adicionou suporte experimental para informar problemas de contraste automaticamente na guia "Issues".

Texto de baixo contraste é o problema de acessibilidade detectável automaticamente mais comum na Web. Mostrar esses problemas na guia "Problemas" ajuda os desenvolvedores a descobri-los com mais facilidade.

Abra uma página com problemas de baixo contraste (por exemplo, esta demo). Em seguida, abra a guia Problemas ao Clique no botão Contagem de problemas na barra de status do console para conferir os problemas.

Problema do Chromium: 1155460

Visualização em árvore de acessibilidade completa no painel Elementos

Agora você pode alternar para ver a nova e aprimorada visualização em árvore de acessibilidade de uma página.

O painel de acessibilidade atual oferece uma exibição limitada dos nós, mostrando apenas os cadeia de ancestral direta do nó raiz para o nó inspecionado. A nova visualização em árvore de acessibilidade visa para melhorar isso e torna a árvore de acessibilidade mais explorável, útil e fácil para os desenvolvedores usar.

Depois de ativar o experimento, um novo botão vai aparecer no painel Elementos. Clique para alternar. entre a árvore DOM existente e a árvore de acessibilidade completa.

Este é um experimento em estágio inicial. Planejamos melhorar e expandir essa funcionalidade ao longo do tempo.

Problema do Chromium: 887173

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