Novidades do DevTools (Chrome 95)

Jecelyn Yeen

Novas ferramentas de criação de tamanho de CSS

O DevTools adicionou uma maneira mais fácil, mas flexível, de atualizar durações no CSS!

No painel Estilos, procure qualquer propriedade CSS com tamanho (por exemplo, height, padding).

Passe o cursor sobre o tipo de unidade e observe que o tipo está sublinhado. Clique nele para selecionar um tipo de unidade no menu suspenso.

Passe o cursor sobre o valor da unidade, e o ponteiro do mouse será alterado para o cursor horizontal. Arraste horizontalmente para aumentar ou diminuir o valor. Para ajustar o valor em 10, mantenha pressionada a tecla Shift ao arrastar.

Você ainda pode editar o valor da unidade como texto, basta clicar no valor e começar a editar.

Problemas do Chromium: 1126178, 1172993

Ocultar problemas na guia "Problemas"

Agora é possível ocultar problemas específicos na guia "Problemas" para se concentrar apenas naqueles que são importantes para você.

Na guia "Problemas", passe o cursor sobre o item que você quer ocultar. Clique em Mais opções   Mais > Ocultar problemas como esse.

Ocultar menu de problemas

Todos os problemas ocultos vão ser adicionados ao painel Problemas ocultos. Expanda o painel. É possível reexibir todos os problemas ocultos ou apenas um selecionado.

Painel de problemas ocultos

Problema do Chromium: 1175722

Melhoria na exibição de propriedades

O DevTools melhora a exibição de propriedades ao:

  • Sempre coloque em negrito e classifique suas propriedades primeiro no Console, no painel Fontes e no painel Propriedades.
  • Nivelar a exibição de propriedades no painel Propriedades.

Por exemplo, o snippet abaixo cria um objeto URL link com duas propriedades próprias: user e access, e atualiza o valor de uma propriedade herdada search.

/* example.js */

const link = new URL('https://goo.gle/devtools-blog');

link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;

Tente fazer login de link no Console. As propriedades próprias agora estão em negrito e classificadas primeiro. Essas mudanças facilitam a identificação de propriedades personalizadas, especialmente para APIs da Web (por exemplo, URL) com muitas propriedades herdadas.

As propriedades próprias estão em negrito e são classificadas primeiro

Além dessas mudanças, as propriedades no painel Propriedades também foram niveladas para oferecer uma melhor experiência de depuração das propriedades do DOM, especialmente para componentes da Web.

Propriedades de nivelamento

Problemas do Chromium: 1076820, 1119900

Lighthouse 8.4 no painel do Lighthouse

O painel Lighthouse agora está executando o Lighthouse 8.4. O Lighthouse agora vai detectar se o elemento Largest Containful Paint (LCP) era uma imagem de carregamento lento e recomendará a remoção do atributo loading dela.

Confira a página O que há de novo no Lighthouse 8.4 para saber mais detalhes sobre as atualizações.

Auditoria de LCP com carregamento lento em um relatório do Lighthouse

Problema do Chromium: 772558

Classificar snippets no painel Origens

Os snippets no painel Snippets, no painel Fontes, agora estão em ordem alfabética. Antes, eles não eram classificados.

Utilize o recurso de snippets para executar comandos mais rapidamente. Assista a este vídeo para ter uma dica.

Classificar snippets no painel Origens

Problema do Chromium: 1243976

Novos links para notas da versão traduzidas e informar um bug de tradução

Clique para ler as notas da versão do DevTools em mais seis idiomas: russo, chinês, espanhol, japonês, português e coreano na guia "Novidades".

Desde o Chrome 94, é possível definir seu idioma preferido no DevTools. Se você encontrou problemas com as traduções, informe um problema, acesse Mais opções e nos ajude a melhorar. Ajuda > Informar um bug de tradução.

Novos links para notas da versão traduzidas e informar um bug de tradução

Problemas do Chromium: 1246245, 1245481

Interface aprimorada para o menu de comando do DevTools

Você achou difícil pesquisar um arquivo no Menu de comando? Temos uma boa notícia: a interface do usuário do Command Menu foi aprimorada.

Abra o Menu de comando para pesquisar um arquivo usando o atalho de teclado Control+P no Windows e no Linux ou Command+P no MacOS.

As melhorias na interface do Menu de comando ainda estão em andamento. Aguarde as próximas atualizações.

Menu de comando

Problema do Chromium: 1201997

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.