1

我正在向我的项目添加错误报告表单。当用户点击表单上的发送按钮时（在他们解释了错误是什么之后），我会自动获取他们浏览器的信息。我目前能够获得他们的用户代理和页面的源代码，但我认为如果我还可以获得已发送到浏览器控制台的任何错误，那将非常有用。

我已经搜索了诸如“javascript get console.log content”之类的东西，但还没有真正找到任何有用的东西。

我阅读了有关为 window.log 创建“包装器”的信息，并找到了以下代码：

window.log = function(){
  log.history = log.history || [];   // store logs to an array for reference
  log.history.push(arguments);
  if(this.console){
    console.log( Array.prototype.slice.call(arguments) );
  }
};

但它似乎没有收到浏览器（chrome）发送到console.log的错误。

有谁知道我怎样才能得到 console.log 中的所有错误？

4

1 回答 1

3

这似乎是一个有趣的想法。我想出的本质上是一个小的 JavaScript 类，它覆盖了控制台的功能（但允许默认行为 - 例如，您仍然可以在 Google Chrome 的 Inspector 中看到信息）。

使用起来非常简单。将此另存为“consolelogger.js”：

/**
 * ConsoleLogger
 *
 * Tracks the history of the console.
 * @author Johnathon Koster
 * @version 1.0.0
 */
var ConsoleLogger = function() {

    // Holds an instance of the current object.
    var _instance = this;

    this._logOverwrite = function(o) {

        var _log = o.log;

        // Overwrites the console.log function.
        o.log = function(e) {
            _instance.pushLog(e);
            // Calls the console.log function (normal browser behavior)
            _log.call(o, e);
        }

        // Overwrites the console.info function.
        o.info = function(e) {
            _instance.pushInfoLog(e);
            // Calls the console.info function (normal browser behavior)
            _log.call(o, e);
        }

        // Overwrites the console.warn function.
        o.warn = function(e) {
            _instance.pushWarnLog(e);
            // Calls the console.warn function (normal browser behavior)
            _log.call(o, e);
        }

        // Overwrites the console.error function.
        o.error = function(e) {
            _instance.pushErrorLog(e);
            // Calls the console.error function (normal browser behavior)
            _log.call(o, e);
        }

    }(console);

    // Holds the history of the console calls made by other scripts.
    this._logHistory = [];
    this._infoHistory = [];
    this._warnHistory = [];
    this._errorHistory = [];

    this._windowErrors = [];

    /**
     * This allows users to get the history of items not explicitly added.
     */
    window.onerror = function(msg, url, line) {
        _instance._windowErrors.push('Message: ' + msg + ' URL: ' + url + ' Line: ' + line);
    }

    /**
     * Adds an item to the log history.
     *
     * @param {log} object to log
     */
    this.pushLog = function(log) {
        this._logHistory.push(log);
    }


    /**
     * Adds an item to the information log history.
     *
     * @param {log} object to log
     */
    this.pushInfoLog = function(log) {
        this._infoHistory.push(log);
    }

    /**
     * Adds an item to the warning log history.
     *
     * @param {log} object to log
     */
    this.pushWarnLog = function(log) {
        this._warnHistory.push(log);
    }

    /**
     * Adds an item to the error log history.
     *
     * @param {log} object to log
     */
    this.pushErrorLog = function(log) {
        this._errorHistory.push(log);
    }

    /**
     * Returns the log history.
     * @this {ConsoleLogger}
     * @return {array} the log history.
     */
    this.getLog = function() {
        return this._logHistory;
    }

    /**
     * Returns the information log history.
     * @this {ConsoleLogger}
     * @return {array} the information log history.
     */
    this.getInfoLog = function() {
        return this._infoHistory;
    }

    /**
     * Returns the warning log history.
     * @this {ConsoleLogger}
     * @return {array} the warning log history.
     */
    this.getWarnLog = function() {
        return this._warnHistory;
    }

    /**
     * Returns the error log history.
     * @this {ConsoleLogger}
     * @return {array} the error log history.
     */
    this.getErrorLog = function() {
        return this._errorHistory;
    }

    /**
     * Returns the window log history.
     * @this {ConsoleLogger}
     * @return {array} the window log history.
     */
    this.getWindowLog = function() {
        return this._windowErrors;
    }

    /**
     * Returns all log histories.
     * @this {ConsoleLogger}
     * @return {array} the error log(s) history.
     */
    this.getLogHistory = function() {
        var _return = [];
        _return = this._logHistory
        _return = _return.concat(this._infoHistory);
        _return = _return.concat(this._warnHistory);
        _return = _return.concat(this._errorHistory);
        _return = _return.concat(this._windowErrors);
        return _return;
    }

}

并将其添加到您的页面，如下所示：

<script src="consolelogger.js"></script>
<script>
// Create a new instance of ConsoleLogger
var logger = new ConsoleLogger;
</script>

现在，您无需执行任何特殊操作即可捕获“console.log”、“console.warn”、“console.info”或“console.error”。ConsoleLogger 会为您完成，并允许您获取已添加内容的历史记录。

要检索历史记录，请调用这些函数（它们都返回一个 JavaScript 数组）：

var logHistory = logger.getLog(); // Get the console.log history
var infoHistory = logger.getInfoLog(); // Get the console.info history
var warningHistory = logger.getWarnLog(); // Get the console.warn history
var errorHistory = logger.getErrorLog(); // Get the console.error history
var windowLog = logger.getWindowLog(); // Get the window error history

var allLogs = logger.getLogHistory(); // Returns all log histories as one array.

我为这么长的帖子道歉，但它似乎可以解决问题！我还创建了一个GitHub 存储库；如果我做更多的工作，更改将在那里提交。

于 2013-05-28T08:40:35.230 回答