Novidades do DevTools (Chrome 108)

Dicas para propriedades CSS inativas

Agora, as Ferramentas do desenvolvedor identificam estilos CSS que são válidos, mas não têm efeito visível. No painel Styles, as DevTools desativam as propriedades inativas. Passe o cursor sobre o ícone ao lado dela para entender por que a regra não tem efeito aparente.

Dicas para propriedades CSS inativas.

Problema do Chromium: 1178508

Detectar automaticamente os seletores de XPath e texto no painel do Gravador

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

Seletores de XPath e texto no painel do Gravador.

Problemas do Chromium: 1327206,1327209

Executar expressões separadas por vírgulas

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

Acesse as expressões separadas por vírgulas.

Antes, as Ferramentas do desenvolvedor só ofereciam suporte para a execução de expressões separadas por ponto e vírgula.

Considerando o código abaixo,

function foo() {}

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

Os transpiladores e minificadores 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 de progressão é diferente entre o código minificado e o autoral. É ainda mais confuso quando se usa mapas de origem para depurar o código minificado em relação ao código original, porque o desenvolvedor está analisando 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

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.

Guia "Lista de ignorados".

Problema do Chromium: 1356517

Destaques diversos

Confira algumas correções importantes desta versão:

  • O nome da propriedade CSS é preenchido automaticamente no painel Styles ao pressionar a tecla de espaço. (1343316).
  • O rolagem automática foi removida do breadcrumb do painel Elemento. (1369734).

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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.

Novidades no DevTools

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