We Keep Coding

How can I debug this JavaScript error?

I have been asked to fix an issue with a website and I am encountering an issue with a JavaScript error.
On the home page, [removed website link], I am receiving the error Uncaught TypeError: undefined is not a function. However, the function being called on that line (line 30) should exist, as the jQuery plugin is being loaded.
The call-stack just shows a series of anonymous functions pointing towards the jQuery file. I am having trouble determining why this is producing an undefined function error.
I have tried using the Chrome debugger to step through the code where the error occurs but it just seems to highlight the jQuery source file for every step.
My question is this:
How do I go about tracking down the source of the issue when the trail is just a series of anonymous functions in the jQuery source file?
Is there something I am missing here or that I am not considering?
Thank you.
Edit:
As is it not clear, the method being called, jQuery.ContentSlider is in fact being included within the page within the file testimonials.js.
This is not just a "What's wrong with my code" question, but also an inquiry into how I handle situations such as this in the context of JavaScript & jQuery specifically.
A call stack of anonymous functions is confusing to me, and I have already attempted to take the obvious steps, such as verifying the plugin is included and that this inclusion takes place before attempting to utilize that plugin.
Sorry for the confusion.
Edit - Solution Found
It appears that although jQuery and the plugin were included prior to use, another copy of the same jQuery file was being injected by a Joomla! module. Since this was the exact same Google hosted jQuery file, it did NOT appear twice in the Resources tab in the Chrome Developer Tools. It appears that Chrome will parse jQuery twice, but doesn't show it as being included twice. So, the version with the plugin attached was being overwritten.
Thank you to those who answered. Thanks to A. Wolff for bringing that piece of information about the Resource tab to my attention.

You're loading the slider after you instantiate it.
Reverse the order of these two blocks:
<script type="text/javascript">
$(function() {
jQuery('#two').ContentSlider({
width : '440px',
height : '240px',
speed : 400,
easing : 'easeOutQuad',
textResize : true
});
});
</script>
<script src="/templates/sp/javascript/jquery.sudoSlider.min.js"></script>
Edit: To the heart of your well-formed question about debugging, generally, Undefined is not a function, especially when dealing with frameworks, is a symptom of trying to access a method before it exists, which is why your attempted function call returns undefined rather than a function.
It's almost always the result of loading a framework after trying to call it, or in an asynchronous context, of not waiting for the framework to load or do something important.
EDIT 2: The above answer is not correct, as A.Wolff points out: it's not that you must reverse the order of the two blocks, but that:
1) The second framework is probably not the one you want, or
2) You have called jQuery('#two').ContentSlider when you meant to call .sudoSlider, (or whatever is appropriate for that framework).

Issue with jQuery uncaught reference

Here is my website
If I open it in Chrome sometime I don't see the menu function on hover.
In the console I get this
Uncaught ReferenceError: jQuery is not defined /catalog/view/javascript/journal/pnotify/jquery.pnotify.min.js:1
Uncaught ReferenceError: jQuery is not defined /catalog/view/javascript/journal/cookie.js:1
Uncaught ReferenceError: jQuery is not defined /catalog/view/javascript/jquery/colorbox/jquery.colorbox.js:82
Uncaught ReferenceError: $ is not defined /catalog/view/javascript/jquery/tabs.js:1
Uncaught TypeError: undefined is not a function
I know this is an old error and I have seen several questions on SO,
but none of them helped me
If you open the same site in Firefox , it warns you about some unresponsive JavaScript and once you click OK it works fine, I am not really sure that what is the issue behind this, if it is jQuery issue, it would be difficult to go in each file and debug it,
Anyone who can assist me by looking at console logs?

You have set the async attribute to jQuery include script like <script async src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script> remove it.
<script src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
In normal circumstances the scripts are executed in the order in which they are included. But since you have used the async flag the execution of core jQuery library will be asynchronous. So there are chances that it will be executed after the rest of script files which needs jQuery library.

Move this line without async
<script src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
to the top of your javascript included files
and make sure there is no conflict between jquery and other library

Hi i was also having the same problem. I got the solution too in my way. you just look at my code. if it does the same thing on your project correct it.
function fill_grid()
{
//some of my work
var para=new Array();
para[0]="id";
para[1]=retcond("");
}
function retcond(posid)
{
//
var cond="where pfid="'19282'";
retcond=cond;
return retcond;
}
The above code was working fine at the first button_click. but at second click gave me the same error you got. now I changed the "retcond()" function into,
function retcond(posid)
{
//
return cond;
}
Since i didn't declare the variable name, it made me troubled. now it solved. hope this can give you any idea.

Export Flash parameters to JavaScript

I'm trying to pass parameters from Flash (as 3.0) to JavaScript.
Tried all methods I found in via. Google, as:
ExternalInterface.addCallback ("fonts", recieveFromJS);
Always one and the same problem; when I try to call the fonts () swfobject, JavaScript gives the error that the method doesn't exist.

Assuming your javascript code does not have a syntax error somewhere, this usually happens because of jquery (or some other js bundle) is stepping on your code. Try using a test page with just the javascript you need, removing all other code and header entries. If it works, then add scripts and links back, one at a time, and you will find which code is breaking it. If it does not work even in your test page, then you have a code/syntax/logic problem with the snippet of code you are working with. If you still have a problem with a code snippet, post it here and I or someone will surely help debug it for you.

Programatically retrieve count of javascript errors on page

I'd like to write a test case (using Selenium, but not the point of this question) to validate that my web application has no script errors\warnings or unhanded exceptions at certain points in time (like after initializing a major library).
This information can easily be seen in the debug consoles of most browsers. Is it possible to execute a javascript statement to get this information programatically?
It's okay if it's different for each browser, I can deal with that.

not so far read about your issue (as far as I understood your problem) here
The idea be the following:
I found, however, that I was often getting JavaScript errors when the page first loaded (because I was working on the JS and was introducing errors), so I was looking for a quick way to add an assert to my test to check whether any JS errors occurred. After some Googling I came to the conclusion that there is nothing built into Selenium to support this, but there are a number of hacks that can be used to accomplish it. I'm going to describe one of them here. Let me state again, for the record, that this is pretty hacky. I'd love to hear from others who may have better solutions.
I simply add a script to my page that will catch any JS errors by intercepting the window.onerror event:
<script type="text/javascript">
window.onerror=function(msg){
$("body").attr("JSError",msg);
}
</script>
This will cause an attribute called JSError with a value corresponding to the JavaScript error message to be added to the body tag of my document if a JavaScript error occurs. Note that I'm using jQuery to do this, so this specific example won't work if jQuery fails to load. Then, in my Selenium test, I just use the command assertElementNotPresent with a target of //body[#JSError]. Now, if any JavaScript errors occur on the page my test will fail and I'll know I have to address them first. If, for some strange reason, I want to check for a particular JavaScript error, I could use the assertElementPresent command with a target of //body[#JSError='the error message'].
Hope this fresh idea helps you :)

try {
//code
} catch(exception) {
//send ajax request: exception.message, exception.stack, etc.
}
More info - MDN Documentation

Javascript eval results in "undefined function" but works in Firebug

I'm wondering why when I call: eval("myFunc(1,2,3)") in the Firebug console on a rendered page, the function executes properly, but when I call the same eval within by javascript within then page, I get a " is not defined" error that pops up in the Firebug console. Part of my problem is that I don't have control over the incoming HTML/JS and I can't seem to find where the function is defined. So I guess my questions are, why am I getting that error and how can I find where the function I'm trying to call is defined? If I pull up the page source, I can see calls to the function but I don't see where it is defined.

If you view the source you should be able to see any JS in the source code and any attached js files too - you should be able to download them and open them in your editor then do a find.

The function is probably defined in an external file. In firebug, if you just type out myFunc (without paranthesis) you should be able to get a clickable link to the source.
The reason it's not working in your eval-script, is probably that it's being executed before the function is defined. Try defering it by, say, putting it in a page load or domready event listener.