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 em CSS.

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

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

Passe o cursor sobre o valor da unidade. O ponteiro do mouse vai mudar para um 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 nele e começar a edição.

Problemas do Chromium: 1126178, 1172993

Ocultar problemas na guia "Problemas"

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

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

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

Problema do Chromium: 1175722

Melhoramos a exibição de propriedades

As DevTools melhoram a exibição de propriedades ao:

• Sempre coloque em negrito e classifique primeiro as propriedades no painel Console, Fontes e 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 estão em negrito e são classificadas primeiro. Essas mudanças facilitam a identificação de propriedades personalizadas, especialmente para APIs da Web (por exemplo, URL) com muitas propriedades herdadas.

Além dessas mudanças, as propriedades no painel Propriedades também são simplificadas para melhorar a experiência de depuração de propriedades do DOM, especialmente para componentes da Web.

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) era uma imagem carregada de forma lenta e recomenda remover o atributo loading dele.

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

Problema do Chromium: 772558

Ordenar snippets no painel "Fontes"

Os trechos no painel Trechos, em Fontes, agora estão classificados em ordem alfabética. Antes, não era classificado.

Use o recurso de snippets para executar comandos mais rapidamente. Assista este vídeo para uma dica!

Problema do Chromium: 1243976

Novos links para notas da versão traduzidas e para 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 problemas com as traduções, ajude a melhorar informando um problema de tradução em Mais opções > Ajuda > Informar um bug de tradução.

Problemas do Chromium: 1246245, 1245481

IU aprimorada para o menu de comandos do DevTools

Você teve dificuldade para pesquisar um arquivo no Menu de comandos? Boas notícias! A interface do usuário do Menu de comandos foi aprimorada.

Abra o Menu de comandos 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 usuário do Menu de comandos ainda estão em andamento. Fique de olho nas próximas atualizações!

Problema do Chromium: 1201997

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu 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.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades do DevTools.