how would I use javascript to loop through the messages in the javascript console and display them to a user, for example adding them line by line to a container element like a div.
I understand how to add messages to the console with console.log but my question is, is there any way to then retrieve messages that have been added.
To do this the idea is to intercept anything being sent to the console. Here is a cross browser solution.
function takeOverConsole(){
var console = window.console
if (!console) return
function intercept(method){
var original = console[method]
console[method] = function(){
var message = Array.prototype.slice.apply(arguments).join(' ')
// do sneaky stuff
if (original.call){
// Do this for normal browsers
original.call(console, message)
}else{
// Do this for IE
original(message)
}
}
}
var methods = ['log', 'warn', 'error']
for (var i = 0; i < methods.length; i++)
intercept(methods[i])
}
Found this from taking-over-console-log/
Here I call the the function, and do a simple log "hey". It will interecept it and I will alert the intercepted message. http://jsfiddle.net/Grimbode/zetcpm1a/
To explain how this function works:
We declare a variable console with the actual console. If the console is undefined we just stop right away and leave the function.
We declare var methods = ['log', 'warn', 'error'] for the different console message types
We loop through the methods and call the intercept function and send the console type (string: 'log', 'warn', etc).
Intercept function simply applies a listener~ to that type of console message. In our case we are applying a listener to log, warn and error.
We retrieve the message and put it in the message variable.
Since we intercepted the message, it won't be shown in the console, so we go ahead and original.call() or original() to add it to the console.
Related
I've tried searching it up with multiple different wordings and on multiple websites with no answer, is it possible, is it not, and if so, how? I need to be able to get code to run when anythign is logged to the console and get what that thing was.
You can override console.log's default behavior:
var log = console.log;
var logs = []
console.log = function(e) {
log.apply(console, [].slice.call(arguments));
logs.push(e) //custom code
};
console.log("Hello World!")
console.log('Printed logs:', logs)
Save the original console
var log = console.log;
Monkey patch it i.e. modify it when run and all at runtime
//use the log instance and 'apply()' method to apply to inherit it
//we pass in a date for each call of console.log() when using the original ( log() )
log.apply(console, [(new Date().toString())].concat([].slice.call(arguments)) ); };
Now everytime we call - log() - we are calling the original
//to test it do this
log('test','this is the original console.log());
This is the patched version
console.log("This is the Monkey Patched console.log()!", "More text...");
Is it possible using some javascript trickery to tell console.log which line number it should output?
Suppose, we the following simple example:
function Logger () {
this.debug = function(msg) {
// do some stuff with msg
console.log(msg);
};
}
var log = new Logger();
log.debug("Hello");
If you open the page, Chrome shows up this:
This indicates that the message was logged at main.js:4 but what I really want is that it shows main.js:9. Because line 9 is where the logger was called.
For this simple case it doesn't make much difference, but when the Logger is in a separate file, it always shows logger.js instead of the class which called the logger.
The Logger class should do some additional stuff with the logged message (e.g. sending it to the server), thus I can't just use this.debug = console.log.
EDIT:
There are already some similar questions, but all of them just add an additional line to the output, which isn't clickable to jump to the corresponding line:
Extending console.log without affecting log line
console.log wrapper that keeps line numbers and supports most methods?
Get console wrapper to log message on correct line
Getting Chrome's console.log to display the line that called a function
Custom console.log that keeps line number
Intercept console.log but keep stack
https://stackoverflow.com/questions/28457477/javascript-console-log-change-line-number-to-somewhere-higher-in-the-stack?rq=1
The first thing that comes to my mind is creating a new Error object to get the stack trace and then find the line that called your method, like this:
function Logger () {
this.debug = function(msg) {
// do some stuff with msg
//TODO: document this line
var callerLine = new Error().stack.split('\n')[2];
console.log(msg, callerLine);
};
}
var log = new Logger();
log.debug("Hello");
Basically I'm splitting the error's stack in each newline and ignoring the first and second lines (The error message and your own method in the stack, respectively).
I've been hunting around Google and various JavaScript websites, but I've yet to find an answer for this. Is there any way that I could use JavaScript/JQuery to monitor events such as console.log()?
For example, I'd like to trigger an even when a separate, cumbersome-to-deal with script calls console.log('foo'); When using any web inspector with a JavaScript console, it's easy to see foo pop up when the script logs it, but is there a way I can hook that event with a different script?
Code borrowed from Can I extend the console object (for rerouting the logging) in javascript?:
(function() {
var exLog = console.log;
console.log = function(msg) {
exLog.apply(console, arguments);
alert(msg);
}
})()
This should allow you to do just about anything when console.log() has been executed, as long as this code runs before console.log() is executed.
While you cannot extend console, you can wrap each of it's methods. The code below intercepts every logging method and records each call in a variable called log.
var actualConsole = window.console;
var c = window.console = {};
var log={};
for (var m in actualConsole){
if (typeof console[m] ==='object'){
c[m]=console[m];
}else if (typeof actualConsole[m] ==='function'){
c[m]=function () {
var args = Array.prototype.slice.call(arguments);
log[this]=log[this]||[];
log[this].push(args);
actualConsole[this].apply(actualConsole,args);
}.bind(m);
}// else - nothing else expected
}
console.log('log',1);
console.log('log',2);
console.error('error',1);
console.warn('warn',1);
actualConsole.log('log:',log);
Log looks like:
{"log":[["log",1],["log",2]],"error":[["error",1]],"warn":[["warn",1]]}
I'm trying to get the console.log as string in pure JavaScript.
My input is a script, which I'm not familiar with, and I want to collect all the messages in the console.log into a string.
For example:
function doSomething(){
console.log("start");
console.log("end");
var consoleLog = getConsoleLog();
return consoleLog;
}
function getConsoleLog(){
// How to implement this?
}
alert(doSomething());
JSFiddle link
Note that I do not need to alert the log - this is just a simple example of testing the functionality. I'll have to do some operations on the log's content.
You could overwrite console.log method before using it:
var logBackup = console.log;
var logMessages = [];
console.log = function() {
logMessages.push.apply(logMessages, arguments);
logBackup.apply(console, arguments);
};
Using apply and arguments preserves the correct console.log behaviour, i.e. you can add multiple log messages with a single call.
It will push all new console.log messages to logMessages array.
for security issues, there is no api to read the history of console.log().
If I receive an error from a framework or an error from the browser. Basically a runtime error of any kind. Without modifying the framework, is it possible for me to override the console logs that these frameworks make and the browser's errors. I want to use my own framework with own error handling system when informing the user of errors of practically anything runtime (not syntax errors). I don't know if you would class it all as runtime errors because of the way javascript is executed in the browser but hopefully you will get me?
Is this possible if all the frameworks are written in Javascript?
How is this achieved?
What considerations do I have to make between different browsers?
Thanks
You are probably looking for a try-catch block:
try {
alert(foo);
} catch(e) {
alert('The code got the following error: '+e.message);
}
Whenever the code between the try {} receives an error, the catch(e) {} block will execute, with the argument e being the error object for the error that occurred. In this case, the variable foo is not defined, so executing this code will result in an alert message saying "The code got the following error: foo is not defined"
While not over-riding console.log, you may be achieve the same effect by overriding window.onerror.
From the MDN documentation
window.onerror = function myErrorHandler(errorMsg, url, lineNumber) {
// Log the error here -- perhaps using an AJAX call
}
You could try overriding the console.log() function.
//Save original reference
var originalConsole = console;
//Override
console = {};
console.log = function()
{
//According to MDN the console.log function can receive a variable number of params
for(var i=0; i<arguments.length; i++)
{
//Make your changes here, then call the original console.log function
originalConsole.log("Change something: "+arguments[i]);
}
//Or maybe do something here after parsing all the arguments
//...
}
console.log("one", "two");
JSFiddle here.
You can override the console logs by creating a "console" object and overriding it's .log() function:
var console = {};
console.log = function(){};
Some browsers require this to be added to the window object directly; so, for browser compatibility, also add:
window.console = console;
Additionally, you can override other console functions (e.g. console.info, console.warn and console.error) if you're using those too.
Also, consider reading this blog post from Udi Talias on overriding the console functions. Good and quick read!
You can custom your console.log here
// copy the original
let originalConsole = Object.assign({}, console);
// do something with your log.
console.log = (value) => {
//some cool condition
if (true) {
value = "new_log : " + value
}
originalConsole.log(value);
};