获取所有控制台数据

Question

我想在我的应用程序中放置一个按钮，如果按下它，它将获取写入控制台的所有内容并通过电子邮件发送给我（用于报告错误）。我知道我可以保留一个变量，每次我做一个console.log也会将消息附加到该变量但是我试图将应用程序的内存消耗保持在低水平，这样只需要从中获取它就会更有效率控制台。

有没有办法从javascript中检索控制台消息？

由于

Answer 1

你做不到。无法从JavaScript中读取控制台中的内容。

您可以做的是挂钩console.log功能，以便在记录时存储：

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

console.logs包含记录的所有内容。您可以随时通过console.logs.length = 0;清除它。

您仍然可以通过调用console.stdlog来执行标准的非存储日志。

Answer 2

获取所有控制台数据

如何读取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

日志

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));
}

错误

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));
}

警告

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));
}

调试

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));
}

Answer 3

如果您正在使用vue.js，则可以执行以下操作：

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

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

控制台中的所有日志都将被捕获并存储在data

中

Answer 4

我过去曾使用此代码来捕获所有控制台活动，并将其与 types 和 timestamps 一起存储在console.everything中发送回服务器以诊断表单数据输入问题。我会尽早在<head>元素中运行此代码。

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);
    }
}

Answer 5

QA Collective 的解决方案非常好，但有很多重复的代码，并且没有捕获未通过 console.log、console.error 等打印的错误。

这是他的解决方案的 DRY 和扩展版本，它捕获了更多显示在控制台中的错误消息：

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)
  })
}

我还将时间戳格式更改为使用 UTC 时区的 ISO 格式，以便能够更轻松地比较不同时区的时间戳。

Answer 6

如果你只是想捕捉 windows 错误（浏览器的开发者工具），你只需要使用 window.onerror 监听器。最重要的是继续返回false，因为如果你在回调中返回true，那么错误的传播将停止并且不再登录控制台。

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 
}

如何在JavaScript中阅读Chrome控制台

6 个答案:

获取所有控制台数据

日志

错误

警告

调试