CODEWITHSUNDEEP
javascriptgoogle-chrome
Mike
Mike

Reputation: 1473

How to read from Chrome's console in JavaScript

I would like to put a button in my app, if you press it it will get the contents of everything that was written to the console and email it to me (for reporting bugs). I know I can keep a variable around and every time I do a console.log also append the message to that variable but I am trying to keep the memory consumption of the app low so it would be much more efficient just to grab it from the console.

Is there a way to retrieve the console messages from javascript?

Upvotes: 137

Views: 154612

Answers (6)

Sujeet Mishra
Sujeet Mishra

Reputation: 209

If you just want to catch windows errors (Browser's developer tool), you just need to use the window.onerror listener. and the most important thing is to keep returning it false because If you return true in your callback, then the propagation of the error will stop and won't be log in the console anymore .

window.onerror = function myErrorHandler(err, url, line) {  
    //Do some  stuff 
    console.log(err) // Uncaught SyntaxError: Invalid or unexpected token at Line no:- 1
    return false;   // so you still log errors into console 
}

Upvotes: 5

BenVida
BenVida

Reputation: 2312

QA Collective's solution is very nice but has a lot of repeated code and doesn't capture errors that are not printed via the console.log, console.error, etc.

Here's the DRY and extended version of his solution that captures more error messages that show up in the console:

if (console.everything === undefined) {
  console.everything = [];
  function TS(){
    return (new Date).toLocaleString("sv", { timeZone: 'UTC' }) + "Z"
  }
  window.onerror = function (error, url, line) {
    console.everything.push({
      type: "exception",
      timeStamp: TS(),
      value: { error, url, line }
    })
    return false;
  }
  window.onunhandledrejection = function (e) {
    console.everything.push({
      type: "promiseRejection",
      timeStamp: TS(),
      value: e.reason
    })
  } 

  function hookLogType(logType) {
    const original= console[logType].bind(console)
    return function(){
      console.everything.push({ 
        type: logType, 
        timeStamp: TS(), 
        value: Array.from(arguments) 
      })
      original.apply(console, arguments)
    }
  }

  ['log', 'error', 'warn', 'debug'].forEach(logType=>{
    console[logType] = hookLogType(logType)
  })
}

I also changed the timestamp format to use the ISO format in UTC timezone, to be able to compare time stamps in different time zones more easily.

Upvotes: 20

Edsel Ayala
Edsel Ayala

Reputation: 227

If you're working on vue.js, you can actually do this:

data () {
    return {
        data: []
    }
},
created () {
    let current_log = console.log;

    console.log = msg => {
        if (msg !== undefined) this.data.push(msg);
        current_log.apply(null, arguments);
    }
}

All logs from console will be captured and stored in data

Upvotes: 6

QA Collective
QA Collective

Reputation: 2419

I have used this code in the past to capture all console activity and store it with types and timestamps in console.everything for sending back to the server for diagnosing form data entry issues. I run this code as early as possible in the <head> element.

if (console.everything === undefined)
{
    console.everything = [];

    console.defaultLog = console.log.bind(console);
    console.log = function(){
        console.everything.push({"type":"log", "datetime":Date().toLocaleString(), "value":Array.from(arguments)});
        console.defaultLog.apply(console, arguments);
    }
    console.defaultError = console.error.bind(console);
    console.error = function(){
        console.everything.push({"type":"error", "datetime":Date().toLocaleString(), "value":Array.from(arguments)});
        console.defaultError.apply(console, arguments);
    }
    console.defaultWarn = console.warn.bind(console);
    console.warn = function(){
        console.everything.push({"type":"warn", "datetime":Date().toLocaleString(), "value":Array.from(arguments)});
        console.defaultWarn.apply(console, arguments);
    }
    console.defaultDebug = console.debug.bind(console);
    console.debug = function(){
        console.everything.push({"type":"debug", "datetime":Date().toLocaleString(), "value":Array.from(arguments)});
        console.defaultDebug.apply(console, arguments);
    }
}

Upvotes: 24

user8629798
user8629798

Reputation:

get all console data

how to read browser console error in js?

How to read from Chrome's console in JavaScript

https://www.quora.com/How-do-I-read-console-window-errors-from-Chrome-using-JavaScript

logs

console.defaultLog = console.log.bind(console);
console.logs = [];
console.log = function(){
    // default &  console.log()
    console.defaultLog.apply(console, arguments);
    // new & array data
    console.logs.push(Array.from(arguments));
}

error

console.defaultError = console.error.bind(console);
console.errors = [];
console.error = function(){
    // default &  console.error()
    console.defaultError.apply(console, arguments);
    // new & array data
    console.errors.push(Array.from(arguments));
}

warn

console.defaultWarn = console.warn.bind(console);
console.warns = [];
console.warn = function(){
    // default &  console.warn()
    console.defaultWarn.apply(console, arguments);
    // new & array data
    console.warns.push(Array.from(arguments));
}

debug

console.defaultDebug = console.debug.bind(console);
console.debugs = [];
console.debug = function(){
    // default &  console.debug()
    console.defaultDebug.apply(console, arguments);
    // new & array data
    console.debugs.push(Array.from(arguments));
}

Upvotes: 42

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382092

You can't. What's in the console can't be read from JavaScript.

What you can do is hook the console.log function so that you store when it logs :

console.stdlog = console.log.bind(console);
console.logs = [];
console.log = function(){
    console.logs.push(Array.from(arguments));
    console.stdlog.apply(console, arguments);
}

console.logs contains all what was logged. You can clean it at any time by doing console.logs.length = 0;.

You can still do a standard, non storing, log by calling console.stdlog.

Upvotes: 148

Related Questions