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 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. Abra o painel. Você pode mostrar todos os problemas ocultos ou um selecionado.

Painel "Hidden issues"

Problema do Chromium: 1175722

Melhoramos a exibição das propriedades

As DevTools melhoram a exibição das propriedades:

  • Sempre destaque e classifique as propriedades próprias primeiro no Console, no painel Origens 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 atraso e recomenda a remoção do atributo loading.

Confira as Novidades do Lighthouse 8.4 para mais detalhes sobre as atualizações.

A auditoria de LCP carregada com lentidão 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, não era assim.

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 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 denunciando um problema de tradução em Mais opções > Ajuda > Denunciar 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ê acha 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.