5

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.

2
  • 2
    Can you give an example? Commented Oct 6, 2011 at 18:08
  • I've never tried to use it, but have you looked at error()? Whether this would catch underlying JavaScript errors I'm unsure, though. Commented Oct 6, 2011 at 18:10

2 Answers 2

3

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

Sign up to request clarification or add additional context in comments.

3 Comments

this answer is tips on avoiding my coding mistakes (helpful) but the real gem is that last paragraph (silent failure for chaining). I was hoping for a 'debug' mode that would point these out so I could find them faster
I added an example on how you can do your own debugging for jQuery prototypes.
nice example, but empty selectors are not my general mistake, it is null-reference errors that cause my UI to just sit there silently. In firebox (or chrome debugger) code leaps into the jquery.js file without any warning. I trace it back to undeclared variables (via typo) or trying to reference thru properties that dont exist.
0

there's the workaround here:

jQuery error on null selector

but I doubt that's really what you want-

1 Comment

correct, my problems are more basic, involving null references and the like.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.