Novidades do DevTools (Chrome 108)

Jecelyn Yeen

Dicas para propriedades CSS inativas

As DevTools agora identificam estilos CSS válidos, mas sem efeito visível. No painel Estilos, o DevTools esmaece as propriedades inativas. Passe o cursor sobre o ícone ao lado para entender por que a regra não tem um efeito visível.

Problema do Chromium: 1178508

Detectar automaticamente seletores de XPath e texto no painel "Gravador"

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

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 minimizado.

Antes, o DevTools só permitia percorrer expressões separadas por ponto e vírgula.

Considerando o código abaixo,

function foo() {}

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

Transpiladores e minificadores podem transformá-los em expressões separadas por vírgulas.

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

Isso causa confusão durante a depuração porque o comportamento de depuração é diferente entre o código minificado e o criado. É ainda mais confuso ao usar mapas de origem para depurar o código minimizado em termos do código original, já que o desenvolvedor está olhando para ponto e vírgulas (que foram transformados em vírgulas pela cadeia de ferramentas), mas o depurador não para neles.

Problema do Chromium: 1370200

Melhoria na configuração 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

Confira 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 no rastreamento de navegação do painel Elemento. (1369734)

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.