How can I find the real bug in my files? - javascript

I wrote a program and want to debug it using firebug. But firebug always tells me there is something wrong with my library files such as jquery, which is absolutely not the root of the problem. It shows as follows:
((f.event.special[s.origType] || {}).handle || s.handler).apply is not a function
...{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAt... jquery....min.js (line 3)
I know there must be something wrong with my program. But how could I find the real bug in my files?

Place a breakpoint on the jQuery line where the error occurs and unwind the call stack until it originates with your code (which will probably call a jQuery method with incorrect argument types, etc).

From #alex answer, here is how to use breakpoint.
Click at line number that you want. Just keep an eye on the line and press F10 to the next line. At line 10 will throw to library. Because an error. Hope it can help you.

Related

debugging javascript console error

I just got some big project and with error in console. there are many more than scripts used at that page but error shows very little information. there are 25 scripts loading at page. To give you an idea how many scripts they are you can see. :(
I have error in console but i can't find which original file, line number causing it. the error showing are in library. but i know it's not library bug it's caused by some other script. but this stack trace is very small. is there any tool or any other way where i can originally find from where it is originating.
let me know if further information is required.
If you click on link "amstock.js" you will be redirect to that file and directly in the line that was causing the error. Always the upper file is which causes the problem, but some times because of a previous one.
In adition, the error maybe cause by an asynchronous call that leaves your variable in null and fill it after the line of the error was call, or just you are trying to access a wrong variable. Check that line.

How to find the location of an error when line numbers cannot be used

I am finding it difficult to locate where an error occurs in javascript on a client I have no access to. Currently I trap the error with onerror and send the arguments to a log on the server.
Unfortunately the line number is no help because numerous javascript files get included, causing the line number to not correspond to anything I have access to.
So if I get something like "n is not defined", and n occurs many times in the function, I have no way to locate where it happened.
I have been trying to reference the code on the line throwing the error say "x=n * 5 + 4", then I could search for that code, but have had no luck referencing the actual code on a line from within javascript.
So how does one locate the line that threw the error in this situation?
client uses firefox only, if that matters.
I have no access to client
This is not one error I am stuck on, but working on how to track an error in this situation
Your best bet would be to use Firefox's debugger.
Open dev tools
Go to the debugger, select the .js file you want, and hit the little {} button in the bottom left (depending on version yours may be in a different location) -- this will prettify the JavaScript
Set breakpoints by clicking next to line numbers
From here on out you have to do this old-fashioned. Cast a breakpoint net around your trouble code, then keep narrowing down the lines until you find the occurrence that causes the error.
Of course, once you find the line it still won't be 1-to-1 with the original code, but hopefully the breakpoint exercise will at least reduce the scope of code/logic you have to dig through.
use your debugger to enable breaking on error. once you break, look at your locals for clues about your location. go up the stack and look at each frame.
you should be able to trace n up the stack and find out why it was null
the little {} that william suggested is also helpful

Uncaught TypeError without ability to find the reason

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

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

JavaScript: Ci is not defined

I just spent half an one our to find out what caused the Error-Message "Ci is not defined" in my JavaScript code. I finally found the reason:
It should be (jQuery):
$("asd").bla();
It was:
("asd").bla();
(Dollar sign gone missing)
Now after having fixed the problem I'd like to understand the message itself: What does Firefox mean when it tells me that "Ci" is not defined. What's "Ci"?
Update:
I'm using the current version of Firefox (3.0.3).
To reproduce, just use this HTML code:
<html><head><title>test</title>
<script>
("asd").bla();
</script>
</head><body></body></html>
To make it clear: I know what caused the error message. I'd just like to know what Firefox tries to tell me with "Ci"...
I don't know which version of FF you are using, but regardless, the message is probably referring to the fact that bla() is not a function available on the String object. Since you were missing the $, which means you were missing a function, ("asd") would evaluate to a string, and then the JavaScript interpreter would try to call bla() on that object. So, if you had the following code in your project:
String.prototype.bla = function() {};
// now this next line will execute without any problems:
("asd").bla();
So, it is possible that Ci is some internal Firefox symbol that simply refers to the idea of a function. That is my guess, I imagine you are going to need someone that knows something about Firefox's internals to get a better answer to this question...
UPDATE: I am running your example code in the exact same version of FF as you are, but it reports the error as:
Error: "asd".bla is not a function
Source File: file:///C:/test.html
Line: 3
Perhaps you have an extension/plug-in running that does something with this? Maybe some Greasemonkey script or something?
Jason seems to be right. Many plugins (e.g. Firebug, Geode) use Ci as a shortcut:
const Ci = Components.interfaces;
So the plugins seem to cause that strange error message.
Assuming it's CodeIngiter, it can't find the js file.

Categories

Resources