Javascript not reporting errors - javascript

So, I'm writing an application that has ~5k lines of javascript... and it's stopped reporting errors. No firebug, IE triangle thing, nothing. It just won't work if there's an error. Anyone seen anything like this before? Debugging is somewhat... frustrating...
My best guess is too many layers of abstraction? But there aren't really that many.

Something else is wrong. It's not simply the size of your javascript. I'm running 70,000 lines of JavaScript in Chrome's debugger and FireFox 6's firebug and there are no debugging problems.
Look elsewhere. Is something not getting loaded? Do you need to clear cache and refresh? Try another browser (like Chrome) and see the results.
If it stopped reporting errors, its more likely those errors do not exist in your current revision, or that a block of code that you think is executing is actually never run. Set a breakpoint.

99% your script is not executing at all. You need manual trace, either with breakpoints, console.logs or alerts.
1% is that you have error handlers, who silence them. Look for suspicious try { .. } catch () {} and window.onerror.

Related

Firebug: During breakpoint, can't execute console statement

I'm seeing the following behavior in Firebug:
When the debugger is paused on a breakpoint, if I go to the console and attempt to execute a statement, the Enter key keeps just adding lines instead of executing.
I've tried hitting Shift+Enter and Ctrl+Enter also, to no avail.
Environment
I sometimes get this issue on firebug (console), FireFox (dev console), and FireFox developer edition (dev console).
Issue
Using the "web console" I would type something like alert("test") and hit the enter key but it would not run.
Instead of running it would enter a new line as if I hit "Shift Enter". Oddly when I hit "Shift Enter" just to see what happens, there is no more new line but the code does not run.
Attempt to find a solution
I restarted my computer, and it went away only to return again later. I don't have a solution but more of a work around (that works some of the time). The biggest issue is I don't know what causes this to happen. After may hours I can only guess what I think the issue is.
I suspect that why this happens is the developer console gets disconnected with the web page that it is trying to debugged.
If the Dev tools are disconnected, then it can not run the code (my alert) because it does not know what page/tab to run it on.
Work Around
Fully closing all Firefox windows/tabs (and its dev/firebug windows/tabs). This may-or-may-not re-associate the console with the web page allowing the code to run again.
Disclaimer
It works for me most of the time, I would be vary happy if someone (who knows more about this) could explain why this happens and a better solution. But until then for anyone else with this issue like me I hope this helps.
I have experienced the same issue, where I would enter (a long) javascript statement in the console and pressing enter would just add new lines instead of running the statements.
In my case this was caused by brackets and parentheses that were not balanced. Once they were balanced, hitting the enter key would execute the statements.

Illegal access Javascript error in Chrome

I have sporadically been getting an "illegal access" exception in Chrome (29 and 30). Others have also seen this. It seems to happen on one specific line:
Here, this is an object I defined. It has a property end which is null or a number.
Does anyone know of anything that could cause an error with that message in Chrome?
EDIT: I don't expect anyone to debug ten thousands of lines of my code. What could cause an error with that message, whether it be jumping off the moon, singing blues, etc?
There are no occurrences of "illegal" in all of the Javascript code on the page.
This error has not happened in later versions of Chrome (31+).
Hopefully this is gone for good.
According to https://github.com/highcharts/highcharts/issues/2443, this would help:
try {
delete ret['e'];
} catch (e) {} // do nothing
We can't be sure, but depending on your network speed, hardware, your DOM wasn't totally and perfectly loaded.
You was probaby using recursion, many of them, with some hard javascript computation on each.
What happened is all tags and scripts of the DOM was already loaded and parsed, so the script started anyway. But content data not fully.
The javascript addEventListener(DOMContentLoaded", ) is more watching tags and their good closures to start his job, instead of the real full data load.
This behavior is possible on other browsers.
While your script was for sure too loud on his time, the javascript engine on all browsers had evolved enough to handle it smoothly, mostly on the memory part which was clearly the funnel.

Want to get a Javascript stacktrace/callstack when unhandled exception occurs

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.

Stop suppressing JavaScript errors

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

'Invalid Argument' Error in IE, in a line number that doesn't exist

I'm getting the following error in IE 6:
Line: 454
Char: 13
Error: Invalid Argument
Code: 0
URL: xxxxx/Iframe1.aspx
and I can't for the life of me find what's causing this.
This only happens in a situation where I have a main page that has several IFrames, and it only happens when I have one particular IFrame (the one pointed to by the URL in the error message), and that IFrame is invisible at the time of loading.
I've narrowed it up to there, but I still can't find anything more specific...
The IFrame in question doesn't have 454 lines in its HTML, nor do any of the JS files referred by it.
I tried attaching VS to iexplore.exe as a debugger, and it breaks when the error occurs, but then tells me "There is no source code available for the current location"...
Any suggestions on how I can go about chasing this one?
UPDATE: I found this problem through brute-force, basically, commenting everything out and uncommenting randomly...
But the question still stands: what is the rational way to find where the error is, when IE reports the wrong line number / file?
IE's Javascript engine is disgusting when it comes to debugging. You can try enabling script debugging in the Advanced Options, and then if you have Visual Studio installed it will jump to the place of error... if you're lucky. Other times you don't get anything, especially if the code was eval()'ed.
Another thing about these line numbers is that it doesn't reflect which file the error is happening in. I've had cases where the line number was actually correct, but it was in a linked .js file, not the main file.
Try using the Microsoft Script Debugger or DebugBar (http://www.debugbar.com) which may give you some better IE6 debugging tools. They always help me with IE6.
Also, does this happen in any newer versions of IE or just in IE6?
It's virtually impossible to debug this without a live example, but one thing that often causes an "Invalid Argument" error in Internet Explorer is trying to set an incorrect value for a style property.
So something like:
document.getElementById("foo").style.borderWidth = bar + "px";
when "bar" has the value null, or undefined, or is the string "grandma", will cause it, as "grandmapx" isn't a valid value for the borderWidth style property.
IE9 has a browser mode.
Open up Developer Tools, then select the version you want to emulate in the console, reload the page with errors, and the console will show you line numbers and the correct file where the error is.
I run into this problem a lot too, and I've also resorted to commenting everything out until I find the problem. One thing that I find to be useful is to add a try/catch block to every javascript method. Sometimes I add an alert to tell what method the error came from. Still tedious, but easier than trial and error commenting. And if you add them every time you write a new method it saves a lot of time in the event errors like those occur.
function TestMethod()
{
try
{
//whatever
}
catch (ex)
{
ShowError(ex.description);
//alert("TestMethod");
}
}
A note to other readers: I recently had this "Invalid argument." error reported in IE7-9 and eventually found that it was down to the way I was using setTimeout/setInterval.
This is wrong, in IE:
var Thing = {};
Thing.myFunc = function() { ... };
setTimeout(Thing.myFunc, 1000);
Instead, wrap the callback in an anonymous function like so:
var Thing = {};
Thing.myFunc = function() { ... };
setTimeout(function() { Thing.myFunc(); }, 1000);
and no more "invalid argument" errors.
Another possibility:
I do a lot of dev between two computers, at home and at work, so I often email myself or download pages from the server to work on. Recently I realised that Vista has a habit of unilaterally applying blocks to certain files when they are downloaded in certain ways, without notifying me that it is doing this.
The result is that, for example, an HTML page wants to access the .js file in its header, but it doesn't have permission to access local files. In this case, it doesn't matter what you write in the .js file, the browser will never even read it, and an irksome Line: 0 error will result.
So before you comb your code for an error, check your HTML page's properties, and see if it hasn't been blocked by the OS....
Like NickFitz pointed out, styling was an issue with my code.
document.getElementById('sums<%= event.id %>').style.border='1px solid #3b3b3b;'
I removed the border style and my IE issues were gone.

Categories

Resources