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, 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 visível.

Dicas para propriedades CSS inativas.

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.

Seletores de XPath e texto no painel do Gravador.

Problemas do Chromium: 1327206,1327209

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

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

Dado 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 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 e ignorar um único script ou padrão de scripts.

A 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 seu navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes das Ferramentas do desenvolvedor, permitem testar APIs avançadas da plataforma Web e encontrar problemas no seu 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 as mudanças na postagem ou qualquer outra coisa relacionada ao DevTools.

Novidades nas DevTools

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