jquery隐藏了简单的javascript错误
我在chrome和firefox中使用jQuery和flot。 当我处理我的代码时,我发现执行在诸如访问不存在的哈希结构之类的愚蠢内容上无声地失败。
感觉jQuery中有一些try {} catch {}逻辑让我看不到任何错误。
关于如何解决这个问题的任何指针,如果没有毯子hack-n-slash来隔离一个简单的bug在哪里?
jshint并没有太大的帮助。
– 编辑 –
更多调试显示趋势。
我基本上找到了拼写错误(未定义的变量)并在对象属性存在之前提前获取它们。 使用.hasOwnProperty()有所帮助,但很麻烦。 我想我在某个地方看到了一个方便的实用程序来帮助简洁地测试深层结构。
调试jQuery时, .length
是你的朋友。 因为即使:
document.getElementById('nonexistent');
将在JavaScript中返回null
,使用jQuery选择器将返回一个对象并转换为true
:
if(!document.getElementById('nonexistent')) { alert('not here!'); } if(!$('#nonexistent')) { alert('here, here!'); }
意思就是:
$('#nonexistent').doSomething().doSomethingElse().whatever();
可能不会抛出错误,所以你很难知道链条中“什么不起作用”。
但是,检查对象长度有效:
if(!$('#nonexistent').length) { alert('not here!'); }
jQuery被设计为无声地失败,因为它的一个核心用例是链接。 如果选择器或原型方法在链中返回null或false,那么使用jQuery会比大多数没有经验的程序员想要的更频繁地抛出空引用错误。
更新
如果处于调试模式,您可以通过修改原型来进行自己的调试。 我试过这个:
var debug = ['hide','show'], // Array of jQuery methods to debug i = 0, name; for(; debug[i]; i++) { name = debug[i]; if (typeof $.fn[name] == 'function') { $.fn[name] = (function(name, fn) { return function() { if ( !this.length ) { console.warn('No elements selected when calling '+name); } fn.apply(this, Array.prototype.slice.call( arguments )); }; }(name, $.fn[name])); } }
现在,每当我调用’hide’时,如果链中没有元素,它会警告我:
$('#nonexistent').hide(); // consoles a warning
小提琴: http : //jsfiddle.net/B4XQx/
这里有解决方法:
null选择器上的jQuery错误
但我怀疑这是你真正想要的 –