Question

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

我已经搜索了“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中获取所有错误？

Answer 1

这似乎是一个有趣的想法。我想出的本质上是一个小的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 repo;如果我再做任何工作，那么将在那里进行更改。

如何获得浏览器诊断

1 个答案: