Novidades do DevTools (Chrome 108)

Jecelyn Yeen

Dicas para propriedades CSS inativas

O DevTools agora identifica estilos CSS que são válidos, mas não têm efeito visível. No painel Styles, o DevTools esmaece as propriedades inativas. Passe o cursor sobre o ícone ao lado dela para entender por que a regra não tem efeito visível.

Problema do Chromium: 1178508

Detectar automaticamente seletores XPath e de texto no painel Gravador

O painel Gravador agora é compatível com seletores XPath e de texto. Comece a gravar um fluxo do usuário, e o gravador escolherá automaticamente o XPath e o menor texto exclusivo de um elemento como seletor, se disponíveis.

Problemas do Chromium: 1327206,1327209

Percorrer expressões separadas por vírgulas

Agora é possível percorrer expressões separadas por vírgulas durante a depuração. Isso melhora a capacidade de depuração do código minificado.

Antes, o DevTools só oferecia permissão para percorrer expressões separadas por ponto e vírgula.

Dado o código abaixo,

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

Os transpiladores e minimizadores podem transformá-los em expressões separadas por vírgulas.

function bar(){return foo(),foo(),42}

Isso cria confusão durante a depuração, porque o comportamento da etapa é diferente entre código minificado e criado. É ainda mais confuso usar mapas de origem para depurar o código minificado em termos do código original, já que o desenvolvedor analisa os pontos e vírgulas (que foram transformados em vírgulas pelo conjunto de ferramentas), mas o depurador não para neles.

Problema do Chromium: 1370200

Configuração aprimorada da lista de ignorados

Acesse Configurações > Lista de ignorados. O DevTools melhora o design para ajudar você a configurar as regras para ignorar um único script ou padrão de scripts.

Problema do Chromium: 1356517

Destaques diversos

Estas são algumas correções importantes nesta versão:

• Preencha automaticamente o nome da propriedade CSS no painel Estilos ao pressionar a barra de espaço. (1343316).
• Remova a rolagem automática na localização atual do painel Elemento. (1369734).

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 dão acesso aos recursos mais recentes do DevTools, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.

• Envie uma sugestão ou feedback pelo site crbug.com.
• Informe um problema do DevTools usando Mais opções   > Ajuda > Relate problemas no DevTools no DevTools.
• Tuíte em @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

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