Novidades do DevTools (Chrome 95)

Jecelyn Yeen

Novas ferramentas de criação de tamanho de CSS

O DevTools adicionou uma maneira mais fácil e flexível de atualizar comprimentos no CSS.

No painel Styles, procure qualquer propriedade CSS com comprimento (por exemplo, height, padding).

Passe o cursor sobre o tipo de unidade e observe que ele 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 mudará para o cursor horizontal. Arraste horizontalmente para aumentar ou diminuir o valor. Para ajustar o valor em 10, segure 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 você pode ocultar problemas específicos na guia "Problemas" para se concentrar apenas nos que são importantes para você.

Na guia "Issues", passe o cursor sobre um problema que você quer ocultar. Clique em Mais opções   Mais   > Ocultar problemas como este.

Ocultar menu de problemas

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

Painel "Hidden issues"

Problema do Chromium: 1175722

Melhoramos a exibição das propriedades

As DevTools melhoram a exibição das propriedades:

  • Sempre coloque em negrito e classifique suas propriedades primeiro no Console, no painel Fontes e no painel Propriedades.
  • Achate 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 registrar link no Console. As propriedades próprias agora são exibidas em negrito e classificadas primeiro. Essas mudanças facilitam a identificação de propriedades personalizadas, principalmente 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 Properties também foram simplificadas para melhorar a experiência de depuração de propriedades do DOM, principalmente para componentes da Web.

Aplanar propriedades

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 as Novidades do Lighthouse 8.4 para mais detalhes sobre as atualizações.

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

Problema do Chromium: 772558

Classificar snippets no painel "Origens"

Os trechos no painel Snippets, no painel Origens, agora são classificados em ordem alfabética. Antes, eles não eram classificados.

Use o recurso de snippets para executar comandos mais rapidamente. Assista este vídeo para conferir 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

Agora você pode clicar para ler as notas da versão do DevTools em outros 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ê encontrar algum problema com as traduções, ajude a melhorar informando um problema de tradução em Mais opções > Ajuda > Informar um bug de tradução.

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

Problemas do Chromium: 1246245, 1245481

Aprimoramento da interface do menu de comando do DevTools

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

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

As melhorias na interface do menu de comando ainda estão em andamento. Fique de olho nas próximas atualizações.

Menu de comando

Problema do Chromium: 1201997

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 pré-lançamento dão acesso aos recursos mais recentes do DevTools, permitem testar APIs modernas da plataforma da Web e ajudam a encontrar problemas no 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 que foi abordado na série Novidades no DevTools.