Sometimes I get an error or an unhandled exception in a line in the jQuery UI js file. I know the problem was an empty or null object or property was passed to jQuery. For example in Chrome I get a 'Uncaught TypeError" error.
Doing some manual work I can find the culprit and I can do better error handling. This could take some time.
However I am looking for a fast automatic way to find the culprit by looking at the stacktrace when the exception occurred. Is there a modern browser which has this feature built in?
Or some JavaScript error handler which works across all the loaded js files in a global level?
I looked at this article but it seems I have to sprinkle printStackTrace() in all the targetted functions. I don't like this idea much if my code has many functions.
in webkit (what chrome or safari uses) debug tools, click the Scripts section on the top. then look for hexagon like icon on the bottom with the two vertical lines. clicking that will cause javascript execution to pause on an error. At the right you will see the callstack, where you can trace through everything.
Related
Every time I right-click anywhere in my Application, jQuery is going to throw an error at line 5095 saying:
Uncaught TypeError: undefined is not a function
To find the cause of this error I tried two ways without success:
1. Debug jQuery:
In the Dev-Tool's I debug jQuery at Line 5095. The Problem: When I move the cursor over the page, it will stop and break. I have NO possibility to get it to make a right click. Even if I press play in Chrome's Debug-Line which appears, it will instantly fire again, even if I won't move the cursor!
2. Searching the reason in my code:
Since this Error is thrown for a long time now I cannot tell where to search. I have multiple js-files. So I realized the error is being thrown when I release the mouse-button. So I searched ALL my code for ANY mouse(-up/down)-events without success (found several that wont fire if I set breakpoints)
Now I am out of ideas how to find the source of it. I thought debugging the line of jQuery where the error is thrown would give me access to the stack variables with possibly more information about its source. Any suggestions?
Please don't ask me to post code. Since I can't tell where the mistakes happen I might post thousands of lines of JavaScript. I need a logical way to find the Errorsource.
the error definitely isn't in jquery or jquery-ui files. it's most definitely in a plugin's code or your custom code.
think of where the error might be. just do a basic estimation. and put a console.log() before those lines and run it again. see if the error occurs before the console output. if it happens before, investigate the code that executes before this line and the javascript files that are included before this file. if it happens after do the opposite. You can narrow down by putting multiple console.log()s
you can look at events with
$._data(element, "events")
but you cant see where the bind is in your code
maybe someone knows
I am getting the following error. How can I resolve this?
Uncaught ReferenceError: chrome_fix3 is not defined
_cmp_execLogic._cmp_suclick
Good news - the error is nothing to do with your site.
Bad news - it's caused by an erroneous browser extension that's injecting invalid javascript into your pages. I have an ever increasing list of similarly caused errors that we can do nothing other than trap and ignore. At some point I intend to feed a message back to the user that something they have installed may cause problems on our sites, but ideally I'd like to tell them exactly what extension is causing the issue, which I don't know in all cases.
If anyone knows where the attempt to reference "chrome_fix3" actually comes from, please add to this post.
A similar error that we trap but is nothing to do with our code is:
Uncaught ReferenceError: conduitPage is not defined
I found the following pages helpful when investigating the error:
https://webmademovies.lighthouseapp.com/projects/65733/tickets/2895-crash-referenceerror-conduitpage-is-not-defined
http://www.youtube.com/user/conduityoursite#g/c/4B820DE13E03888D
Your code tries to refer to a variable or property that does not exist, in your case it's named chrome_fix3.
This probably came from a javascript libary that you are using, maybe jQuery or something.
I assume that the library is fine and it's caused by wrongfully calling some of it's functions.
The best way now is to install the Firebug plugin in Firefox (you could use Chrome, Opera or Internet Explorer's debugger but I like Firebug best)
Then add following code in your code where you think it's going wrong:
//add the following line only once:
var okCounter=0;
// add teh following line every couple of lines in your code:
console.log("still ok here:",okCounter++);
Open your page in Forefox and hit F12, the Firebug window should show up now. Reload the page and check out the console tab.
At some point you should notice there is no more output to the console where there should be; now you have found the part in your code where something goes wrong. If you post that part we might be able to help you out more.
I am working in FireFox and I notice that a exception is thrown in my Firebug console.
The exception is in a jQuery function, but I have no idea who the caller is.
The webpage has a lot of custom javascript files included with many lines of code.
Is there any trick that I can use to find out from where the call came?
I have tried removing some of the included javascript files, but due to the size of the project and how things are connected, it is limited.
I tried placing a "debugger;" attribute in a javascript file and just stepped through the code, but it doesn't seem that I hit the correct place doing this.
One way to find the caller is to put a breakpoint in the jquery line where the exception is thrown. Then you will be able to go through the call stack and see how is the first caller.
But be carefull with firebug, sometime when you put breakpoints, you get a different behaviour if you have multiple asynchronous call. If this is your case, use Chrome debugger to manage this.
I'm using Firebug to view JavaScript errors. But I'm also using jQuery. For some reason, I never see JavaScript errors when using jQuery and this is one of the biggest problems with working with jQuery in the first place.
There's no particular code to show, just imagine alert(areareg); where areareg is undefined or any sort of JavaScript error, and Firebug won't tell me about it. The JavaScript will simply fail without warning or notification of any sort. This is always the case, in any project where I've used jQuery and it's the only reason I don't like jQuery; because it's notoriously difficult to debug when something goes wrong.
For some reason I've even had trouble finding this question raised online, let alone answered. But I figured I'd give it a try here:
Is there any way to make jQuery stop suppressing error messages?
Am I the only one in the world who has always had this problem with jQuery?
EDIT:
I use both Firefox (with Firebug) and Chrome, and I only use the non-minified version of jQuery. Still, I have never in my entire life seen a jQuery error message of any kind, neither useful nor useless, nor in fact normal JavaScript errors, when using jQuery.
Well, despite your impression, jQuery itself doesn't do anything to "suppress" error messages. Now, Firefox does tend to throw away certain kinds of exceptions, notably like what you describe. I often find that wrapping a whole Javascript block in a try ... catch with an alert call should an exception happen is a useful way to deal with it, but it's still irritating.
I use google Chrome for my debugging, and it's pretty good, it shows all the jquery errors as well (as Alfred said, if you use minified version, you wont get any meaningful name in your errors, so it's better to use the raw source)
I am having the same problem in FF 18. I am using JSF and JQuery, though it happens even for plain JS code on the page. I intentionally put javascript code that should throw a syntax error without a word in Firebug. FF 18 has its own built-in console that looks similar to firebug. When I disabled the firebug plug-in the console.log messages started showing up. However, the errors are still not showing up. I just tried Chrome and the errors do appear there.
I've run into this problem several times. It's quite inconsistent and hard to replicate, sometimes it seems related to version issues. Settings rarely seem to make a difference, though "Break on next" sometimes (not always) identifies errors that otherwise slip through.
One thing I've noticed is, it tends to happen for code that is triggered inside a callback function, e.g. from a UI event or from an AJAX call. Sometimes Firefox / Firebug will behave like other browsers and show errors in the console, sometimes it gives nothing at all even for incredibly clear-cut cases like:
console.log('something'); // Shows up in console fine
fail // Other browsers give undefined variable error, Firefox gives nothing
console.log('something else'); // Never reached, so silent error clearly happens
The best approach I've found to this is:
Once you've found a no-show error, work back using console.trace() until you reach a point where inside a function, the error is hidden, outside, it shows, adding some code snippet like:
console.trace();
fail // cause the error, look out for a trace followed by nothing
If it's an AJAX call, manually add a basic error handler, because for some reason Firefox/Firebug is losing the default:
$.ajax({
error: function(a,b,c){
throw c;
},
other: '...settings'
}
If it's something you can't add an error handling function to, wrap it in a try... catch, for example:
try {
// whatever the code is within which there are no errors
} catch( err ){
throw err;
}
This should be enough to catch all errors where-ever they are within the scope where Firefox is losing them. Beware of cases where you have a callback within a callback though, you might need to do this twice...
I'm writing a javascript / HTML5 canvas library to provide basic GUI elements for web audio applications.
There's a little demo script that creates widgets with the library and assemble them in a GUI. You can find it # http://bitterspring.net/webshifter/
The problem is, it seems to work correctly on Chrome and on Firefox 3.6 - 4.0 but, in the last cases, only with firebug. Without firebug, the script seems to visualize nothing on screen, while with firebug it does.
The only firebug-related pieces of code are some console.log statement I use to track the behaviour of the library. But these statements should have no effect on a non-firebug enabled browser, as I learnt from Firebug forums. What can prevent the example script to work, in these cases?
The library + example code is freshly committed on http://github.com/janesconference/KievII , by the way.
EDIT: Seems that, when console is not defined, console.log() throws an exception. Is there a way to keep the logging lines of code and not getting the exception? (yeah, one could check if console != undefined, but is there a better way?)
EDIT: This does the trick, it seems (Font)
if (typeof console=="undefined"){console={log:function(A){var B=false;if(B){alert(A)}}}}
Right, the console object is not available in all browsers by default.
This code:
if (typeof console=="undefined"){console={log:function(A){var B=false;if(B){alert(A)}}}}
- currently disables console support in Firefox 4's Web Console, since it tries to inject the console object when opened and won't do that if the page already defined a console object.
An interesting wrapper for console that deals with this problem is: http://benalman.com/projects/javascript-debug-console-log/ , although I haven't tried it myself.