jQuery选择器调试器

Question

我最近开始研究现有项目。以前的开发人员有很多javascript和html模板文件。随着时间的推移，他从这些文件中删除了一些代码而没有任何参考（参见示例）。

例如

• （a）没有点击事件的按钮
• （b）HTML中没有DOM元素的jquery选择器：$('#someSelector')但<someElement id="someSelector"></someElement>不存在。

案例（a）很容易解决，因为我只看到未使用的元素，并将其从相应的文件中删除。

第二部分有点困难，因为当jQuery找不到选择器时，浏览器控制台没有触发错误。

我可以使用以下内容测试选择器：

if($('theSelector').length ){
    //alert or console, the selector matches some element.
}

这种技术在时间上非常昂贵，因为我需要逐个测试每个选择器。

是否有自动执行此任务的工具？我尝试了FireQuery（一个firefox插件），但它没有给我很好的结果。

P.S： 该项目不使用javascript框架也不使用系统模板。 （真的很糟糕！）

Answer 1

在修改$以记录它的电话后，你可以稍微踢一下轮胎。 加载以下脚本

var $$=$, log=[];
$=function(s){
  log.push(s);
  return $$.apply(this, arguments);
};
$$.extend($,$$);

现在点击并执行jQuery在网站上执行的“所有操作”，然后运行：

console.log(log.filter(function(s){
  return jQuery(s).length===0;
}));

将未实现的选择器列表转储到控制台。当然，修复问题并删除这些代码，因为它减慢了jQuery的速度，并且它可能与所有插件100％兼容，但它适用于我通过控制台在堆栈上执行的快速测试。除了“$”之外，您还可以考虑使用“jQuery”来捕获noconflict用法。