jquery hides simple javascript errors

问题

I'm using jQuery and flot in chrome and firefox. As I work on my code, I find that execution silently fails on stupid stuff like accessing non-existent hash structures and the like.

It feels like there is some try {} catch {} logic within jQuery that keeps me from seeing any errors.

Any pointers on how to get around this without blanket hack-n-slash to isolate where a simple bug is?

jshint hasn't been too helpful.

--edit--

more debugging shows a trend.

I'm basically finding typos (undefined variables) and premature fetching of object properties before they exist. Using .hasOwnProperty() has helped but is cumbersome. I think I saw a handy utility someplace to help test deep structures succinctly.

回答1:

.length is your friend when debugging jQuery. Because even if:

document.getElementById('nonexistent');

will return null in JavaScript, using a jQuery selector will return an object and cast true:

if(!document.getElementById('nonexistent')) {
    alert('not here!');
}

if(!$('#nonexistent')) {
    alert('here, here!');
}

Which means that:

$('#nonexistent').doSomething().doSomethingElse().whatever();

Will probably not throw errors, so you will have a hard time knowing what "didn’t work" in the chain.

However, checking the object length works:

if(!$('#nonexistent').length) {
    alert('not here!');
}

jQuery is designed to fail silently, since one of it’s core use cases is chaining. And if selectors or prototype methods would return null or false in the chain, using jQuery would throw null-reference errors more often than most inexperienced programmers would want.

Update

You can probably do your own debugging by modifying the prototypes if in debug mode. I tried this:

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]));
    }
}

Now, whenever I call 'hide', it will warn me if there are no elements in the chain:

$('#nonexistent').hide();  // consoles a warning

Fiddle: http://jsfiddle.net/B4XQx/

回答2:

there's the workaround here:

jQuery error on null selector

but I doubt that's really what you want-

来源：https://stackoverflow.com/questions/7678582/jquery-hides-simple-javascript-errors

标签

jquery

debugging

syntax

try-catch