Novidades do DevTools (Chrome 96)

Jecelyn Yeen

Recurso em pré-lançamento: novo painel "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.

Você pode detalhar ainda mais as informações. Por exemplo, clique em uma cor na seção Cores para ver a lista de elementos que usam a mesma cor. Clique em um elemento para abrir no painel Elementos.

O painel Visão geral do CSS é um recurso em prévia. Nossa equipe ainda está trabalhando nisso e quer seu feedback para fazer mais 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

Experiência de edição e cópia de comprimento de CSS restaurada e aprimorada

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

Além disso, é possível arrastar para ajustar o valor da unidade e atualizar o tipo de unidade no menu suspenso. Esse recurso de criação de conteúdo para complementos não deve afetar a experiência principal de edição como texto.

Informe os problemas encontrados em goo.gle/length-feedback.

Para desativar, desmarque a caixa de seleção Configurações > Experimentos > Ativar ferramentas de criação de comprimento de CSS no painel "Estilos".

Problemas do Chromium: 1259088, 1172993

Renderização de atualizações de guias

Emular o recurso de mídia CSS "prefers-contrast"

Emular o recurso de mídia CSS "prefers-contrast"

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

Abra o menu de comandos, execute o comando Mostrar renderização e defina o menu suspenso Emular recurso de mídia CSS 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 ver facilmente como sua página aparece quando o tema escuro automático do Chrome está 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 os temas escuros no sistema operacional.

Abra o Menu de comandos, execute o comando Mostrar renderização e defina o menu suspenso Emular modo escuro automático.

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 atalho são úteis principalmente para desenvolvedores que trabalham com bibliotecas CSS-in-JS.

No painel Estilos, clique com o botão direito do mouse em uma regra CSS. Selecione 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 código abaixo copia paddingLeft: '1.5rem' para a área de transferência.

Copiar declaração como JavaScript

Problema do Chromium: 1253635

Nova guia "Payload" no painel "Rede"

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

Melhoramos a exibição de propriedades no painel "Propriedades".

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

Junto com as melhorias no painel Propriedades do Chrome 95, agora é mais fácil localizar as propriedades relevantes.

A exibição de propriedades no painel "Propriedades"

Problema do Chromium: 1226262

Atualizações do console:

Opção para ocultar erros de CORS no console

É possível ocultar erros do CORS no Console. Como os erros do CORS agora são informados na guia "Problemas", ocultá-los 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 de CORS no console.

Opção para ocultar erros de CORS no console

Problema do Chromium: 1251176

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

Os objetos Intl agora têm a visualização adequada e são avaliados imediatamente no console. Antes, os objetos Intl não eram avaliados imediatamente.

Objetos Intl no console

Problema do Chromium: 1073804

Stack traces assíncronos consistentes

Agora o console informa stack traces async para funções async, de acordo com outras tarefas assíncronas e 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 veio para ficar. No Chrome 94, anunciamos a descontinuação da barra lateral do console e pedimos feedback e dúvidas dos desenvolvedores.

Já recebemos feedback suficiente sobre o aviso de descontinuação e vamos trabalhar 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 porque o suporte ao AppCache foi removido do Chrome e de outros navegadores baseados no Chromium.

Problema do Chromium: 1084190

[Experimental] Novo painel da API Reporting no painel "Application"

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, agora é possível conferir o status dos relatórios no novo painel da API Reporting no painel Application.

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

Saiba mais sobre a API Reporting neste artigo.

Painel da API Reporting no painel "Application"

Problema do Chromium: 1205856

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.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades do DevTools.