这似乎是一个有趣的想法。我想出的本质上是一个小的 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 存储库;如果我做更多的工作,更改将在那里提交。