Novidades do DevTools (Chrome 108)

Jecelyn Yeen

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.

Problema do Chromium: 1178508

Detectar automaticamente seletores XPath e de texto no painel 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.

Problemas do Chromium: 1327206,1327209

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

Antes, as DevTools 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

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.

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

Considere usar 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 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.

• Envie feedback e solicitações de recursos para crbug.com.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

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