如何獲得瀏覽器診斷

Question

我正在向我的項目添加一個錯誤報告表單。當用戶點擊表單上的發送按鈕（在他們解釋錯誤是什麼之後），我會自動獲取其瀏覽器的信息。我目前能夠獲得他們的用戶代理和頁面的源代碼，但是我認爲這會非常有用，如果我也可以得到任何已經發送到瀏覽器控制檯的錯誤。

我已經搜索了像「javascript get console.log內容」之類的東西，但還沒有真正發現任何有用的東西。

我讀到有關創建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中的所有錯誤？

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;如果我還有更多的工作要做，就會在那裏做出改變。