jQuery选择器调试器 [英] jQuery selector debugger

问题描述

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

例如

• （a）没有点击事件的按钮


• （b）HTML中没有DOM元素的jquery选择器： $（'＃someSelector'）但是< someElement id =someSelector>< / someElement> 不存在。

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

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

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

  if（$（'theSelector'）。length） {
 //警报或控制台，选择器匹配某个元素。 
} 
  

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

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

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

解决方案

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

  var $$ = $，log = []; 
 $ = function（s）{
 log.push（s）; 
返回$$。apply（this，arguments）; 
}; 
 $$。extend（$，$$）; 
  

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

  console.log（log.filter（function（s）{
 return jQuery（s）.length === 0; 
}））; 
  

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

I recently started to work on existing project. The previous developer had a lot of javascript and html template files. Over time, he removed pieces of code from this files leaving parts without any reference (see the examples).

For example

• (a) a button without a click event
• (b) a jquery selector without a DOM element inside the HTML: $('#someSelector') but <someElement id="someSelector"></someElement> doesn't exists.

The case (a) is quite simple to solve, because I just see the unused element and I delete it from the appropriate file.

The second part is a little bit more difficult, because the browser console is not firing an error when jQuery does not find a selector.

I can test selectors using something like this:

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

This technique is very expensive in time, because I need to test one by one every selector.

Is there a tool for automate this task? I tried FireQuery (a firefox plugin) but it is not giving me good results.

P.S: The project is not using a javascript framework nor system template. (really bad!)

解决方案

you can kick the tires for a bit after modifying $ to log it's calls. load the following script

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

now click around and do "everything" jQuery does on the site, then run:

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

to dump a list of un-realized selectors to the console. of course, fix the problems and remove this code because it slows jQuery down a lot, and it might not be 100% compatible with all plugins, but it works on the quick tests i did here on stack via the console. you might also consider shadowing "jQuery" in addition to "$" to capture noconflict usages.

这篇关于jQuery选择器调试器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！