Uncaught TypeError: Cannot read property 'length' of undefined

Question

I have a plugin that access the length property on many elements. However, the javascript console points to line 12 of jquery.min.js.

How can I backtrace to find the offending line in my plugin?

Answer 1

If you use minified scripts any debugger (like totally the best firebug) will show you the same problematic line and this information is useless (minified scripts are hard to read and understand and they are written in 1 line).

Few ways to solve problems like this:

1. As told before me: for developing use not minified scripts, debugger will show you the line that means something and you if you are lucky you can find very useful comments of developers.
2. If you can't find full version of the script use unminifier like this one: http://jsbeautifier.org/ (paste minified script and click button below). Add to your project uminified script and run invalid function again. Debugger again will show you the line, but this time you will see a real logic line and you can understand what is the problem in most cases.
3. Debugger will show you which script throws problem. Check if there any any new versions of this script. I had the same problem once, found line of the minified script, name of plugin (few lines above in copyrights) and then found that there is a new version available. Reviewed changelog and there was: "Added multiple 'sanity checks' throughout the code for potential unknown attribute values" - headshot :) Updated script and everything was fine from now without special debugging taking hours.
4. Google your error with script name - it helped me so many times.. Probably you did it, but maybe you didn't try with speech marks "" - google will return pages with exact phrase in text.

Answer 2

How can I backtrace to find the offending line in my plugin?

firebug is great way to debug those errors.

_{(source: getfirebug.com)}

Answer 3

If you use Chrome you can use the built in developer tools (which I prefer to Firebug) by going to "View > Developer > Developer Tools". The error in the console there will often have a small rightward pointing arrow before it which when clicked will show more details about the error.

Javascript errors are not likely to originate in a library, but instead the code that references the methods/functions inside that library and so you want to look through all the problem lines listed on the right side of the console and select the line that corresponds to the code you wrote which will be where your problem is.

You are not likely to figure out where your problem is by looking through jQuery's source code. The problem is in your code. It's just that jQuery can't use undefined variables you pass to it.

Answer 4

I often find that these ambiguous framework errors are the result of an AJAX request error. If that is the case, your Developer Tool Of Choice most likely contains a Network tab, and that may highlight the real source of the error.

If you are using jQuery (or any JavaScript framework) to process the results of AJAX requests, both formatting and handling errors are additional and often overlooked steps.