O que há de novo no DevTools (Chrome 95)

Published on Updated on

Translated to: English, Español, 한국어, 中文, Pусский, 日本語

Tradução realizada por Alvaro Camillo Neto. Revisão por Lucas Santos

Interessado em ajudar a melhorar o DevTools? Inscreva-se para participar da Pesquisa de usuário do Google.

Nova ferramenta de edição de comprimentos CSS

DevTools adicionou uma maneira mais fácil e flexível de atualizar comprimentos em CSS!

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

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

Passe o mouse sobre o valor da unidade e o ponteiro do mouse muda 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.

Issues relacionadas: 1126178, 1172993

Ocultar problemas na guia Issues

Agora você pode ocultar problemas específicos na guia Issues para se concentrar apenas naqueles que são importantes para você.

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

Hide issues menu

Todos os problemas ocultos serão adicionados no painel Hidden issues. Expanda o painel. Você pode exibir todos os problemas ocultos ou um selecionado.

Painel de problemas ocultos

Issue relacionada: 1175722

Melhorias na exibição de propriedades

O DevTools agora implementa as seguintes melhorias na exibição de propriedades:

  • Nas abas Console, Sources e Properties, as propriedades customizadas do objeto serão sempre destacadas e ordenadas primeiro.
  • Propriedades aninhadas serão exibidas na aba Properties.

Por exemplo, o snippet abaixo cria um objeto URL objetolink com 2 propriedades customizadas: user eaccess, 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. Propriedades customizadas agora estão em destaque e ordenadas primeiro. Essas alterações facilitam a localização de propriedades customizadas, especialmente para Web APIs(por exemplo, URL) com muitas propriedades herdadas.

As propriedades customizadas estão em negrito e classificadas primeiro

Além dessas mudanças, as propriedades aninhadas no painel Properties agora são exibidas para uma melhor experiência de depuração de propriedades DOM, especialmente para Web components.

Propriedades aninhadas

Issues relacionadas: 1076820, 1119900

Lighthouse 8.4 no painel Lighthouse

O painel Lighthouse agora executa o Lighthouse 8.4. O Lighthouse agora detectará se o elemento Largest Containful Paint (LCP) era uma imagem carregada em lazy-loading e recomendará a remoção do atributo loading dela.

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

A auditoria LCP carregada em lazy-loading em um relatório Lighthouse

Issue relacionada: 772558

Ordenação dos snippets no painel Sources

Os snippets no painel Snippets sob o painel Sources agora estão organizados em ordem alfabética. Anteriormente, não era ordenado.

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

Snippets ordenados no Painel Sources

Issue relacionada: 1243976

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

Agora você pode clicar para ler as notas de lançamento do DevTools em 6 outros idiomas - russo, chinês , espanhol, japonês, português e coreano por meio da guia Novidades.

Desde o Chrome 94, você pode definir seu idioma preferido no DevTools. Se você encontrou algum problema com as traduções, ajude-nos a melhorá-lo relatando um problema de tradução por meio de More options > Help > Report a translation bug.

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

Issues relacionadas: 1246245, 1245481

Melhoria de UI para o menu de comandos do DevTools

Você achou difícil pesquisar um arquivo no Menu de Comandos? Boas notícias para você, a interface de 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 em MacOS.

As melhorias na UI do Menu de Comandos ainda estão em andamento, fique ligado para mais atualizações!

Menu de Comandos

Issue relacionada: 1201997

Baixe os canais de prévia

Considere usar o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de prévia fornecem acesso aos recursos do DevTools mais recentes, testam nas últimas APIs da plataforma web lançadas e encontram problemas em seu site antes que seus usuários o façam!

Entre em contato com a equipe Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças nesse artigo ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou comentários para nós pelo crbug.com.
  • Relate um problema de DevTools usando o More options   More   > Help > Report a DevTools issues em DevTools.
  • Mande um tweet para @ChromeDevTools.
  • Deixe comentários em nossos vídeos "What's new in DevTools" no YouTube.

Mais recursos do DevTools

Consulte a versão em inglês do What's New In DevTools para uma lista completa dos recursos lançados. Abaixo estão alguns conteúdos que foram traduzidos para o português.

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.