O que há de novo no DevTools (Chrome 96)

Published on Updated on

Translated to: English, Español, 한국어, 中文, Pусский, 日本語

Tradução realizada por Alvaro Camillo Neto.

Interessado em ajudar a melhorar o DevTools? Inscreva-se para participar da Pesquisa de usuário do Google.

Prévia de funcionalidade: novo painel de visão geral CSS

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

Você pode expandir as informações. Por exemplo, clique em uma cor na seção Cores para visualizar a lista de elementos que aplicam a mesma cor. Clique em um elemento para abri-lo no painel Elementos.

O painel Visão geral CSS é um recurso em desenvolvimento. Nossa equipe ainda está trabalhando ativamente nele e estamos atentos aos seus comentários para mais melhorias.

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

Painel Visão Geral CSS

Issue relacionada: 1254557

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

As funcionalidades de copiar CSS e editar como texto foram restauradas para as propriedades CSS com comprimento. Essas funcionalidades foram retiradas 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. Este recurso complementar não deve impactar a edição primária como texto.

Por favor, reporte via goo.gle/length-feedback se você encontrar algum problema.

Você pode desativá-lo por meio das Configurações > Experimentos > Enable CSS length authoring tools in the Styles pane caixa de seleção.

Issues relacionadas: 1259088, 1172993

Atualizações da guia de renderização

Emule o recurso de prefers-contrast para CSS media

Emule o recurso de prefers-contrast para CSS media

O recurso 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, em seguida, marque na lista suspensa Emular o recurso prefers-contrast.

Issue relacionada: 1139777

Emule o recurso Auto Dark Theme do Chrome

Use DevTools para emular o Auto Dark Theme e ver facilmente como sua página fica quando o Dark Theme do Chrome for ativado.

O Chrome 96 apresenta um Origin Trial para Auto Dark Theme no Android. Com esse recurso, o navegador aplica um tema escuro gerado automaticamente a sites com temas claros, quando o usuário opta por esse tipo de tema no sistema operacional.

Abra o Menu de comandos, execute o comando Mostrar renderização e defina o menu suspenso Emular o modo auto dark.

Emular o recurso Auto Dark Theme do Chrome

Issue relacionada: 1243309

Copie as declarações como JavaScript no painel Estilos

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

No painel Estilos, clique com o botão direito 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 irá copiar padding-left: '1.5rem' para a área de transferência.

Issue relacionada: 1253635

Nova guia Payload no painel Rede

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

Guia Payload no painel Rede

Issue relacionada: 1214030

Melhoria na exibição de propriedades no painel Propriedades

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

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

A exibição de propriedades no painel Propriedades

Issue relacionada: 1226262

Atualizações de console

Opção para ocultar erros CORS no console

Você pode ocultar erros CORS no Console. Como os erros do CORS agora são relatados na guia Problemas, ocultar os erros do CORS no Console pode ajudar a melhorar seu foco.

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

Opção para ocultar erros CORS no console

Issue relacionada: 1251176

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

Os objetos Intl têm uma visualização adequada agora e são avaliados previamente no Console. Anteriormente, os objetos Intl não eram avaliados previamente.

Intl objects in the Console

Issue relacionada: 1073804

Consistência em stack traces assíncronos

DevTools agora relata stack traces async para funções async para serem consistentes com outras tarefas assíncronas.

stack traces assíncronos

Issue relacionada: 1254259

Mantida a barra lateral do console

A barra lateral do Console veio para ficar. No Chrome 94, anunciamos a próxima descontinuação da barra lateral do Console e pedimos feedback e preocupações aos desenvolvedores.

Agora temos feedback suficiente do aviso de depreciação e trabalharemos para melhorar a barra lateral em vez de removê-la.

Barra lateral do console

Issues relacionadas: 1232937, 1255586

Obsolescência do Painel de cache no painel do Aplicativo

O painel Cache do aplicativo no painel do aplicativo foi removido pois o suporte para AppCache foi removido do Chrome e de outros navegadores baseados em Chromium.

Issue relacionada: 1084190

[Experimental] Novo painel da API de relatórios no painel do aplicativo

Para ativar o recurso experimental, marque a caixa de seleção Ativar painel API de relatórios no painel do aplicativo em Configurações > Experimentos.

A API de relatórios foi projetada para ajudá-lo a monitorar violações de segurança de sua página, chamadas de API obsoletas e muito mais.

Com esse experimento habilitado, agora você pode visualizar o status dos relatórios no novo painel API de relatórios no painel Aplicativo.

Observe que a seção Endpoints ainda está em desenvolvimento ativo (não mostrando endpoints de relatório por enquanto).

Saiba mais sobre a API de relatórios com este artigo.

Painel de API de relatórios no painel do aplicativo

Issue relacionada: 1205856

Baixe os canais de prévia

Considere usar o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de prévia fornecem acesso aos recursos do DevTools mais recentes, testam nas últimas APIs da plataforma web lançadas e encontram problemas em seu site antes que seus usuários o façam!

Entre em contato com a equipe Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças nesse artigo ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou comentários para nós pelo crbug.com.
  • Relate um problema de DevTools usando o More options   More   > Help > Report a DevTools issues em DevTools.
  • Mande um tweet para @ChromeDevTools.
  • Deixe comentários em nossos vídeos "What's new in DevTools" no YouTube.

Mais recursos do DevTools

Consulte a versão em inglês do What's New In DevTools para uma lista completa dos recursos lançados. Abaixo estão alguns conteúdos que foram traduzidos para o português.

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.