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 conferir a lista de elementos que aplicam a mesma cor. Clique em um elemento para abrir no painel Elementos.

O painel CSS Overview é um recurso em fase de pré-lançamento. Nossa equipe ainda está trabalhando nisso e queremos 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

A experiência de edição e cópia de comprimento do CSS foi restaurada e aprimorada

A experiência de copiar CSS e editar como texto é restaurada para propriedades CSS com comprimento. Essas experiências não estão funcionando na versão mais recente.

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 de comprimento de complemento não afeta a experiência de edição como texto principal.

Informe pelo link goo.gle/length-feedback se encontrar algum problema.

É possível desativar essa opção em Settings > Experiments > caixa de seleção Enable CSS length authoring tools in the Styles pane.

Problemas do Chromium: 1259088, 1172993

Como renderizar 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 prefere contraste é usado para detectar se o usuário solicitou mais ou menos contraste na página.

Abra o Command Menu, 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 conferir a aparência da página quando o Tema escuro automático do Chrome 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 Mostrar renderização e defina o menu suspenso Emulação do 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 "Styles"

Duas novas opções foram adicionadas ao menu de contexto para que você possa copiar facilmente regras CSS como propriedades JavaScript. Essas opções de atalhos são úteis principalmente para desenvolvedores que trabalham com bibliotecas CSS-in-JS.

No painel Styles, 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 copia 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 Network ao inspecionar uma solicitação de rede com payload. Antes, as informações do 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 Properties 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.

Com as melhorias do painel Properties no Chrome 95, agora é possível localizar as propriedades relevantes com mais facilidade.

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 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 Settings e desmarque a caixa de seleção Show CORS errors in console.

Opção para ocultar erros do CORS no console

Problema do Chromium: 1251176

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

Os objetos Intl agora têm uma visualização adequada e são avaliados com rapidez no console. Antes, os objetos Intl não eram avaliados de forma ansiosa.

Objetos Intl no console

Problema do Chromium: 1073804

Stack traces assíncronos consistentes

Agora, o console informa os stack traces async para que as funções async sejam consistentes 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 aos desenvolvedores que enviassem feedback e preocupações.

Agora temos feedback suficiente do 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, 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 da 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 API Reporting no painel Application.

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 "Application"

Problema do Chromium: 1205856

Fazer o download dos canais de visualização

Considere usar o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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 que foi abordado na série Novidades no DevTools.