Novidades do DevTools (Chrome 95)

Jecelyn Yeen

Novas ferramentas de criação de comprimento 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 aparece 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 um cursor horizontal. Arraste horizontalmente para aumentar ou diminuir o valor. Para ajustar o valor em 10, mantenha a tecla Shift pressionada 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 opções na guia "Problemas"

Agora é possível ocultar problemas específicos na guia "Problemas" para se concentrar apenas neles que importam para você.

Na guia "Problemas", 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 um selecionado.

Painel de problemas ocultos

Problema do Chromium: 1175722

Melhoria na exibição de propriedades

O DevTools melhora a exibição de propriedades ao:

  • Sempre use negrito e classifique suas propriedades primeiro nos painéis Console, Origens e Propriedades.
  • Nivelar 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 da propriedade search herdada.

/* 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 detecção de propriedades personalizadas, especialmente para APIs Web (por exemplo, URL) com muitas propriedades herdadas.

As propriedades 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, especialmente para componentes da Web.

Nivelar propriedades

Problemas do Chromium: 1076820, 1119900

Lighthouse 8.4 no painel do Lighthouse

O painel Lighthouse já 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 dele.

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

Auditoria de LCP de carregamento lento em um relatório do Lighthouse

Problema do Chromium: 772558

Classificar snippets no painel Origens

Os snippets no painel Snippets abaixo do painel Sources agora estão em ordem alfabética. Antes, ela não é classificada.

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

Classificar snippets no painel Origens

Problema do Chromium: 1243976

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

Agora você pode clicar para ler as notas da versão do DevTools em mais seis idiomas: russo, chinês, espanhol, japonês, português e coreano na guia "Novidades".

Desde o Chrome 94, você pode definir seu idioma preferido no DevTools. Se você encontrou problemas nas traduções, informe um problema de tradução em Mais opções > Ajuda > Informar um bug de tradução para nos ajudar a melhorar.

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

Problemas do Chromium: 1246245, 1245481

interface aprimorada para o menu de comando do DevTools

Você achou difícil pesquisar um arquivo no Menu de comando? Temos uma boa notícia: a interface do usuário do Menu de comando foi aprimorada.

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

As melhorias na interface do Menu de comando ainda estão em andamento. Acompanhe as novidades para saber mais.

Menu de comando

Problema do Chromium: 1201997

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59