YUI3 - Errors don't appear in Firebug - Y.on('available - javascript

solution, you have to call the parameter in the responding function from the Y.on('available', myFunction, domelement'). so function myFunction(e)
Rewriting this,
If I used the following code, (game isn't defined),
function myFunction () {
console.log(game);
}
Y.on('available',myFunction,#domElement);
I don't get an error in my console for game, which isn't defined (should be a reference error).
Any idea why? Or how I can get those errors to show in the console?

Related

Why getting "Uncaught ReferenceError: $ is not defined" error on Chrome Dev Console?

I'm trying to run a simple JQuery script in Chrome Developer Console but I have a problem.
There is no problem in this code when I run it on Chrome Developer Console:
var someValue = $("[name='Jack']");
if(someValue !== null){
console.log("Jack is here!");
}
But, I'm getting an error when try to run the same code inside a setTimeout function like below:
setTimeout(function(){
var someValue = $("[name='Jack']");
if(someValue !== null){
console.log("Jack is here!");
}
}, 1000);
Uncaught ReferenceError: $ is not defined
Not only does this happen in setTimeout function, it happens in a normal function as well.
I'm working with latest version of Google Chrome. How can I use JQuery like above in a setTimeout function?
The confusion here is centered on the fact that $ is part of Chrome's Command Line API. When you use $ in your code, you're referring to the Command Line API function named $. You are probably not loading jQuery at all: indeed, your someValue !== null code wouldn't even work with jQuery anyway. You'd need to test for a non-empty jQuery object (someValue.length > 0), not a non-null.
As for why Chrome's $ is accessible in the console but not a setTimeout callback: this appears to be engine-specific magic that limits the command line API to console code only. setTimeout executes its callback in such a way that Chrome cannot be sure the code originated from the console, so it does not grant access to the command line API function named $. Curiously, this isn't typical of JavaScript. Using normal JavaScript scoping rules, the setTimeout callback should have access to the same variables as the surrounding code, regardless of when and where it's executed. The fact that the scope is different one second later is very surprising -- you are right to feel confused!
As a curiosity, a way to simulate this in vanilla JavaScript would be with an object-based scope via with that mutates after the command completes. For example, if every snippet you typed into the console were wrapped with:
var chromeConsoleAPI = { $: function() { ... } }
with(chromeConsoleAPI) {
// your snippet here
}
delete chromeConsoleAPI.$;
In this case, $ is supplied by accessing the chromeConsoleAPI object on the scope chain. Normal code can access $, but since the setTimeout function runs after chromeConsoleAPI.$ is deleted, it does not find anything named $. Note that this still doesn't completely replicate the behavior, because this blocks access to any user-defined $. In actuality, the command line API must inject its functions at the very top (i.e., most remote) part of the scope chain.
The problem because Jquery library Load after your custome code loaded.
Are you using external js file for your custome script?
Then you load your script under the jquery script.
You must add jquery library link first then add your script.

Style console.log output and run functions

After having a little snoop around the source code for http://pinterest.com, I noticed how they use the console to communicate with users (Appears to only work in Chrome).
Also, if I enter joinUs() on the console log, a function is run which directs me to a new page.
I attempted to run a function within the console log on my own website by declaring a function:
function testFunc(){
console.log('Hello world!');
}
But if I try entering testFunc() on the console log, I get the following error:
ReferenceError: testFunc is not defined
Does anybody have any information on how to style the output of the console log, and how to run a function from within the console?
For styling, you could check https://github.com/adamschwartz/log
If you read through the code I'm sure you can figure out how it works.
As for having testFunc available, try explicitly assigning it to window, so do window.testFunc = function () { console.log('Hello world!') };. That should work.

Javascript: Errors arent being displayed on event listeners

I have a problem that is driving me crazy. I have two event listeners that appear to be identical. The are being called with the same scope but at different times. I have been using chromes debugger tool to step through them. The first one will throw an error
TypeError: Object 1 has no method 'get'
But the second example simple stops executing
el.on("change:one", function() {
debugger;
a = 1;
a.get();
});
el.on("change:two", function() {
debugger;
a = 1;
a.get();
});
I understand that simple asking why is this happening probably needs a detailed explanation of all the libraries being used etc, so my question is:
Is it possible to not display errors thrown by javascript, and how would I be able to detect whether something is overriding the error reporting functionality
NOTE: In both examples I have determined that window.onerror is null
Backbone invokes event handlers synchronously and doesn't catch handler exceptions. So if you had code that looked like:
el.trigger('change:one'); // handler will throw exception
el.trigger('change:two'); // won't execute
The change:two event will never get triggered, resulting in your change:two handler never getting invoked.

How can I override/extend ReferenceError in Chrome's JavaScript?

To make debugging easier, I'm capturing all of the console logs in Chrome so that users who submit a feedback entry will also submit all of the logs to our server. When someone encounters a problem in production, I can first and foremost get them back to work so that I can then sit down and more thoroughly go through all of the logs to determine the root cause of whatever issue the user encountered in production.
The technique I use to capture the logs involves overriding console.log so that all text entered in the first argument gets stored in an array while simultaneously invoking the legacy function so that I can still see the logs in the console too.
The problem is when there's the occasional uncaught exception. These aren't included in the uploaded logs, so it's not always clear what caused the problem. So I tried overriding ReferenceError by writing a JavaScript function that takes a function as an argument, then returns a new function that does stuff with it, like storing data in a variable, and then invoking the legacy function as the last step:
function overrideException(legacyFn) {
/** arguments for original fn **/
return function() {
var args = [];
args[0] = arguments[0];
// pass in as arguments to original function and store result to
// prove we overrode the ReferenceError
output = ">> " + legacyFn.apply(this, args).stack;
return legacyFn.apply(this, arguments);
}
}
To test the overrideException function, I ran the following code on the console:
ReferenceError = overrideException(ReferenceError);
Afterwards, I tested the returned function, the new ReferenceError, by manually throwing a ReferenceError:
throw new ReferenceError("YES!! IT WORKS! HAHAHA!");
The resulting output on the console is:
ReferenceError: YES!! IT WORKS! HAHAHA!
And checking the global variable output from the overrideException function shows that it did indeed run:
output
">> ReferenceError: YES!! IT WORKS! HAHAHA!
at ReferenceError (<anonymous>)
at new <anonymous> (<anonymous>:18:35)
at <anonymous>:2:7
at Object.InjectedScript._evaluateOn (<anonymous>:562:39)
at Object.InjectedScript._evaluateAndWrap (<anonymous>:521:52)
at Object.InjectedScript.evaluate (<anonymous>:440:21)"
Now, here's where things start to fall apart. In our code, we're not going to know when an uncaught exception occurs, so I tested it by attempting to run a function that doesn't exist:
ttt();
Which results in:
ReferenceError: ttt is not defined
However, unlike the case where we explicitly throw an error, in this case, the function doesn't fire, and we're left with only the legacy functionality. The contents of the variable output is the same as in the first test.
So the question seems to be this: How do we override the ReferenceError functionality that the JavaScript engine uses to throw errors so that it's the same one we use when we throw a ReferenceError?
Keep in mind that my problem is limited only to Chrome at this time; I'm building a Chrome Packaged app.
I have done quite a bit of research for the same reason: I wanted to log errors and report them.
"Overriding" a native type (whether ReferenceError, String, or Array) is not possible.
Chrome binds these before any Javascript is run, so redefining window.ReferenceError has no effect.
You can extend ReferenceError with something like ReferenceError.prototype.extension = function() { return 0; }, or even override toString (for consistency, try it on the page, not the Dev Tools).
That doesn't help you much.
But not to worry....
(1) Use window.onerror to get file name, 1-indexed line number, and 0-indexed position of uncaught errors, as well as the error itself.
var errorData = [];
onerror = function(message, file, line, position, error) {
errorData.push({message:message, file:file, line:line, position:position, error:error});
};
See the fiddle for an example. Since the OP was Chrome-specific, this has only been tested to work in Chrome.
(2) Because of improvements to (1), this is no longer necessary, but I leave this second technique here for completeness, and since onerror is not guaranteed to work for all errors on all browsers. You will also sometimes see the following:
var errors = [];
function protectedFunction(f) {
return function() {
try {
f.apply(this, arguments);
} catch(e) {
errors.push(e);
throw e;
}
};
}
setTimeout = protectedFunction(setTimeout);
setInterval = protectedFunction(setInterval);
etc...
FYI, all this is very similar to what has been done in the Google Closure Compiler library, in goog.debug, created during Gmail development with the intent of doing exactly this. Of particular interest is goog.debug.ErrorHandler and goog.debug.ErrorReporter.

Message: Object expected error in IE8

I'm getting the object expected error in IE8. It's working good in chrome & FF.
Actually, error occurred on a javascript method.
for your reference,
function checkForm(idNum, varNum) { alert(234); }
//calling function here.
checkForm(idNum, varNum);
getting error in this line.
i have called this method in document.ready & select box onchange events.
Thanks.
I assume you are using jQuery if you are using document.ready? As in $(document).ready()
If you are then you want to give ready a function, not call a function
As in instead of having
$(document).ready(checkForm(idNum, varNum));
you would use
$(document).ready(function(){checkForm(idNum, varNum);});
ready is just a function and is expecting an object to be passed to it, just like checkForm a function is an object, just like a number or string, and can be passed to other functions and then called, like so...
function foo(bar){
bar();
}
function foobar(){
console.log("foobar has been called");
}
foobar();
foo(foobar);
The output of this being
"foobar has been called"
"foobar has been called"
If I understand what you are doing by the comments...

Categories