Novidades do DevTools (Chrome 96)

Jecelyn Yeen

Recurso em pré-lançamento: novo painel de visão geral de CSS

Use o novo painel Visão geral do CSS para identificar possíveis melhorias de CSS na sua página. Abra o painel Visão geral do CSS e clique em Capturar visão geral para gerar um relatório do CSS da sua página.

É possível detalhar ainda mais as informações. Por exemplo, clique em uma cor na seção Cores para ver a lista de elementos que aplicam a mesma cor. Clique em um elemento para abri-lo no painel Elementos.

O painel CSS Overview é um recurso em fase de pré-lançamento. Nossa equipe ainda está trabalhando nisso e aguardamos seu feedback para fazer outras melhorias.

Leia este artigo para saber mais sobre o painel Visão geral do CSS.

Painel de visão geral do CSS

Problema do Chromium: 1254557

Restauração e melhoria da experiência de edição e cópia do tamanho de CSS

A experiência de copiar CSS e editar como texto é restaurada para propriedades CSS com comprimento. Essas experiências foram corrompidas na última versão.

Além disso, você pode arrastar para ajustar o valor da unidade e atualizar o tipo de unidade por meio do menu suspenso. Esse recurso de criação do comprimento do complemento não deve afetar a edição principal como experiência de texto.

Informe em goo.gle/length-feedback se você encontrou problemas.

É possível desativá-lo em Configurações > Experimentos > Ative as ferramentas de criação de comprimento de CSS na caixa de seleção do painel "Estilos".

Problemas do Chromium: 1259088, 1172993

Atualizações da guia "Renderização"

Emular o recurso de mídia de preferência de contraste entre CSS

Emular o recurso de mídia de preferência de contraste entre CSS

O recurso de mídia prefere contraste é usado para detectar se o usuário solicitou mais ou menos contraste na página.

Abra o Menu de comando, execute o comando Show Rendering e defina o menu suspenso Emulate CSS media feature prefers-contrast.

Problema do Chromium: 1139777

Emular o recurso de tema escuro automático do Chrome

Use o DevTools para emular o tema escuro automático e confira como a página vai ficar quando o tema escuro automático estiver ativado.

O Chrome 96 apresenta um teste de origem para o tema escuro automático no Android. Com esse recurso, o navegador aplica um tema escuro gerado automaticamente a sites com tema claro quando o usuário ativa temas escuros no sistema operacional.

Abra o Menu de comando, execute o comando Show Rendering e defina o menu suspenso Emulate automático modo escuro.

Emular o recurso de tema escuro automático do Chrome

Problema do Chromium: 1243309

Copiar declarações como JavaScript no painel "Estilos"

Duas novas opções foram adicionadas ao menu de contexto para facilitar a cópia de regras CSS como propriedades JavaScript. Essas opções de atalhos são úteis especialmente para desenvolvedores que trabalham com bibliotecas CSS em JS.

No painel Estilos, clique com o botão direito do mouse em uma regra CSS. Você pode selecionar Copiar declaração como JS para copiar uma única regra ou Copiar todas as declarações como JS para copiar todas as regras.

Por exemplo, o exemplo abaixo copiará paddingLeft: '1.5rem' para a área de transferência.

Copiar declaração como JavaScript

Problema do Chromium: 1253635

Nova guia Payload no painel Network

Use a nova guia Payload no painel Rede ao inspecionar uma solicitação de rede com payload. Antes, as informações de payload estavam disponíveis na guia Cabeçalhos.

Guia Payload no painel Network

Problema do Chromium: 1214030

Melhoria na exibição de propriedades no painel "Propriedades"

O painel Propriedades agora mostra apenas as propriedades relevantes, em vez de mostrar todas as propriedades da instância. Protótipos e métodos de DOM foram removidos.

Junto com as melhorias no painel Propriedades no Chrome 95, agora você pode localizar as propriedades relevantes mais facilmente.

Exibição de propriedades no painel "Propriedades"

Problema do Chromium: 1226262

Atualizações do console:

Opção para ocultar erros do CORS no console

É possível ocultar os erros do CORS no Console. Como os erros de CORS agora são informados na guia "Problemas", ocultar os erros de CORS no Console pode ajudar a reduzir a confusão.

No Console, clique no ícone Configurações e desmarque a caixa de seleção Mostrar erros do CORS no console.

Opção para ocultar erros do CORS no console

Problema do Chromium: 1251176

Visualização e avaliação adequadas dos objetos Intl no console

Os objetos Intl têm visualização adequada agora e são avaliados ansiosamente no console. Anteriormente, os objetos Intl não eram avaliados prontamente.

Objetos internacionais no console

Problema do Chromium: 1073804

Stack traces assíncronos consistentes

O console agora relata stack traces de async para que as funções async sejam consistentes com outras tarefas assíncronas e consistentes com o que é mostrado na pilha de chamadas.

stack traces assíncronos

Problema do Chromium: 1254259

Manter a barra lateral do console

A barra lateral do console chegou para ficar. No Chrome 94, anunciamos a futura descontinuação da barra lateral do Console e pedimos feedback aos desenvolvedores.

Já recebemos feedback suficiente do aviso de descontinuação e trabalharemos para melhorar a barra lateral em vez de removê-la.

Barra lateral do console

Problemas do Chromium: 1232937, 1255586

Painel de cache de "Aplicativo descontinuado" no painel "Aplicativo"

O painel Cache do aplicativo no painel "Aplicativo" foi removido, já que o suporte ao AppCache foi removido do Chrome e de outros navegadores baseados no Chromium.

Problema do Chromium: 1084190

[Experimental] Painel da nova API Reporting no painel "Aplicativo"

A API Reporting foi criada para ajudar você a monitorar violações de segurança na sua página, chamadas de API descontinuadas e muito mais.

Com esse experimento ativado, é possível conferir o status dos relatórios no painel da nova API Reporting no painel Aplicativo.

A seção Endpoints ainda está em desenvolvimento ativo (não mostra endpoints de relatórios por enquanto).

Saiba mais sobre a API Reporting neste artigo.

Painel da API Reporting no painel do aplicativo

Problema do Chromium: 1205856

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.