Novidades do DevTools (Chrome 95)

Jecelyn Yeen

Novas ferramentas de criação de comprimento do 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 muda para o cursor horizontal. Arraste na horizontal 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 é possível ocultar problemas específicos na guia "Problemas" para se concentrar apenas naqueles 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 vão ser adicionados ao painel Problemas ocultos. Abra o painel. É possível mostrar todos os problemas ocultos ou apenas um deles.

Painel "Hidden issues"

Problema do Chromium: 1175722

Melhoria na exibição de 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 são exibidas em negrito e 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. Agora, o Lighthouse detecta se o elemento Largest Contentful Paint (LCP) foi uma imagem carregada com carregamento lento e recomenda a remoção do atributo loading.

Confira as Novidades do Lighthouse 8.4 para 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 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 a este vídeo para ter uma dica.

Classificar snippets no painel Origens

Problema do Chromium: 1243976

Novos links para as notas da versão traduzidas e como 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

Use o Chrome Canary, Dev ou Beta como 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 o que foi abordado na série Novidades no DevTools.