Novidades do DevTools (Chrome 90)

Novas ferramentas de depuração da caixa flexível do CSS

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

Quando um elemento HTML na sua página tem display: flex ou display: inline-flex aplicado, você pode ver um selo flex ao lado dele no painel "Elementos". Clique no ícone para ativar ou desativar a exibição de uma sobreposição flexível na página.

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

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

Problemas do Chromium: 1166710, 1175699

Nova sobreposição de Core Web Vitals

Visualize e meça melhor a performance da sua página com a nova sobreposição das Core Web Vitals.

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

Abra o menu de comandos, execute o comando Mostrar renderização e marque a caixa de seleção Core Web Vitals.

A sobreposição mostra:

• Maior exibição de conteúdo (LCP): mede o desempenho de carregamento. Para oferecer uma boa experiência ao usuário, a LCP precisa ocorrer em 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 ao usuário, as páginas precisam ter uma FID de menos de 100 milissegundos.
• Cumulative Layout Shift (CLS): mede a estabilidade visual. Para oferecer uma boa experiência ao usuário, as páginas precisam manter um CLS de menos de 0,1.

Problema do Chromium: 1152089

Atualizações da guia "Problemas"

A contagem de problemas foi movida para a barra de status do console

Um novo botão de contagem de problemas foi adicionado à barra de status do console para melhorar a visibilidade dos avisos de problemas. Isso vai substituir a mensagem de problema no Console.

Problema do Chromium: 1140516

Denunciar problemas com a Atividade Confiável na Web

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

Abra uma Atividade Confiável na Web. Em seguida, abra as guias Problemas clicando no botão Contagem de problemas na barra de status do Console para conferir os problemas. Assista esta conversa de Andre para saber mais sobre como criar e implantar uma atividade confiável na Web.

Problema do Chromium: 1147479

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

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

Problema do Chromium: 1178530

Novo painel "Trust Tokens" no painel "Application"

Agora, o DevTools mostra todos os tokens confiáveis disponíveis no contexto de navegação atual no novo painel Tokens de confiança, no painel Aplicativo.

O Trust Token é uma nova API que ajuda a combater fraudes e distinguir bots de pessoas reais, sem rastreamento passivo. Saiba como começar a usar os Trust Tokens.

Problema do Chromium: 1126824

Emular o recurso de mídia CSS "color-gamut"

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

Abra o Menu de comandos, execute o comando Mostrar renderização e defina o menu suspenso Emular recurso de mídia CSS color-gamut.

Problema do Chromium: 1073887

Ferramentas aprimoradas para Progressive Web Apps

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

O painel Manifesto agora mostra uma mensagem de aviso se a descrição do manifesto exceder 324 caracteres.

Além disso, o painel Manifesto agora mostra uma mensagem de aviso se a captura de tela do PWA não atender 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 "Rede"

Use a nova coluna Remote Address Space no painel "Rede" para conferir o espaço de endereços IP de rede de cada recurso de rede.

Problema do Chromium: 1128885

Melhorias no desempenho

O desempenho de carregamento de páginas com o DevTools aberto foi melhorado. Em alguns casos extremos, observamos melhorias de desempenho de 10 vezes.

As DevTools coletam rastreamentos de pilha e os anexam a mensagens do console ou tarefas assíncronas para consumo posterior pelo desenvolvedor em caso de um problema. Como essa coleta precisa acontecer de forma síncrona no mecanismo do navegador, uma coleta lenta de rastreamento de pilha pode deixar a página muito lenta com o DevTools aberto. Conseguimos reduzir significativamente a sobrecarga da coleta de rastreamento de pilha.

Aguarde uma postagem mais detalhada no blog de engenharia sobre a implementação.

Problemas do Chromium: 1069425, 1077657

Mostrar recursos permitidos/não permitidos na visualização de detalhes do frame

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

A política de permissões é uma API de plataforma da Web que permite a um site autorizar ou bloquear o uso de recursos do navegador no próprio frame ou em iframes incorporados.

Problema do Chromium: 1158827

Nova coluna SameParty no painel "Cookies"

O painel "Cookies" no painel "Application" agora mostra o atributo SameParty dos cookies. O atributo SameParty é um novo atributo booleano para indicar se um cookie deve ser incluído em solicitações para origens dos mesmos conjuntos primários.

Problema do Chromium: 1161427

Suporte não padrão fn.displayName descontinuado

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

O Chrome sempre ofereceu suporte à propriedade não padrão fn.displayName como uma forma de os desenvolvedores controlarem nomes de depuração para funções que aparecem em error.stack e em rastreamentos de pilha do DevTools. No exemplo acima, a Pilha de chamadas mostraria noLongerSupport.

Substitua fn.displayName pelo fn.name padrão, que foi configurado (via Object.defineProperty) no ECMAScript 2015 para substituir a propriedade fn.displayName não padrão.

O suporte para fn.displayName não é confiável nem consistente em todos os mecanismos de navegador. Isso diminui a coleta de rastreamentos de pilha, um custo que os desenvolvedores sempre pagam, usem ou não o fn.displayName.

Problema do Chromium: 1177685

Descontinuação do 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órios automáticos de problemas de baixo contraste na guia "Problemas"

As DevTools adicionaram suporte experimental para relatar problemas de contraste na guia "Problemas" automaticamente.

Texto de baixo contraste é o problema de acessibilidade mais comum detectado automaticamente 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, como esta demonstração. Em seguida, abra as guias Problemas clicando no botão Contagem de problemas na barra de status do Console para conferir os problemas.

Problema do Chromium: 1155460

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

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

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

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

Este é um experimento em estágio inicial. Planejamos melhorar e expandir a funcionalidade com o tempo.

Problema do Chromium: 887173

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.