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.
Related
I have 60.4.0esr (64-bit) installed in by GNU/Linux system. When running the find-across-tabs extension I am getting the error
ReferenceError: browser is not defined[Learn More]
find.js:1:5
<anonymous>
file:///home/username/webextensions-examples-master/find-across-tabs/find.js:1:5
I am able to run extensions like borderify correctly
I think the error is quite clear. The issue here is
ReferenceError: browser is not defined
in the:
let backgroundPage = browser.extension.getBackgroundPage();
They are probably referencing the mozilla.org docs. You can test the examples there to see if you are getting an error or not.
You can run the function directly in popup. In example:
Suppose a background script defines a function foo():
// background.js
function foo() {
console.log("I'm defined in background.js");
}
A script running in a popup can call this function directly like this:
// popup.js
var page = browser.extension.getBackgroundPage();
page.foo(); // -> "I'm defined in background.js"
NOTE: The question is if you are not using private browsing mode as this function can't use with it. This is due to this bug. It will always return null.
is there a way to send the line and file a console function has been called?
i got an app with many console log and console error in it. thats a good thing for me, the problem is i need to know from where they came from.
i tried override console.error and add console.trace inside but that just created a recursive call to console error(i guess they both triggered by process strerr)
here is what i have tried
const tempConsoleError = console.error.bind(console);
console.error = function (err) {
console.log('i am in error')
tempConsoleError(err);
console.trace()
};
console.error('error string ')
ended up writing a packages to do it. is uses the "stack-trace" and node global
console-from
Sometimes I see stray log statements when I load up my application, and I don't remember how the log statement was called. Is there a way to find the stack trace of a console log message from the Chrome developer tools?
Right now, I wrap console.log with a function that prints the stack trace:
console.log = (function () {
var oldLog = console.log.bind(console);
return function () {
try { throw new Error(); } catch (e) {
oldLog(
e.stack.split('\n')
.slice(2)
.map((line) => line.trim().replace('at', 'from'))
.join('\n')
);
}
oldLog.apply(null, Array.prototype.slice.call(arguments));
};
}());
This will print the stack trace in addition to the log message. For this to be useful, I have to insert this code just before any of my code runs. Is there a way to find out this information from just the console, without having to add this wrap?
I primarily use Chrome developer tools, but I'd be interested if this was possible in any other browser.
Have you tried console.trace()? It is available in Chrome and Firefox. For your use-case, you could alias log to trace.
That said, I usually wrap logger statements in a custom logger function that itself wraps whatever I need to use, but which can be programmatically disabled in production to prevent leaking logs.
EDIT:
There aren't currently any chrome://flags that would let you set that behaviour, but you could do this before your console gets invoked (such as at the top of your minified js): console.log=console.trace;
Which will have this effect, (example in Chrome Canary's console):
> console.log("Hello, Robz");
VM929:2 Hello, Robz
undefined
> console.log = console.trace;
function trace() { [native code] }
> console.log("Hello, Robz");
VM935:2 Hello, Robz
VM935:2 (anonymous function)
VM468:777 InjectedScript._evaluateOn
VM468:710 InjectedScript._evaluateAndWrap
VM468:626 InjectedScript.evaluate
Basically. To show the source of a logging-message was a very bad idea. It leads you to write logging messages that neither belongs to the code nor can be localized without a stack-trace.
How do you work in a Team with it?
hey, i got a `ohoh!`-logging in file abc.js in line 3487!
To understand the problem by inspecting the call-stack means: Hey i do not need a text-message, i do not need a message what exactly is going on, just where.
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?
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.