Intersect JavaScript console.log（）调用并将数据发送到我自己的记录器函数

我如何劫持对浏览器的调用

console.log

并将它们发送到我自己的日志函数，同时仍让它们正常进入

console.log

条目

JSBin和CodePen这样的站点允许您在页面DOM中查看控制台日志的三个版本，同时仍然创建console.log条目

所以每次我调用

console.log（'my log msg'）它的行为应该与正常的一样，但也可以将控制台日志数据通过管道/发送到我自己的JavaScript
logger.log（'log entry'）
函数

如何做到这一点


更新
对象的所需自定义记录器输出：

记录此对象：

var data = {
  date: new Date(),
  prop2: 'sfgsdgsd',
  arrayProp: ['key1', 'key2', 'key3'],
  arrayOfObjectsProp: [
  {
      date: new Date(),
      date2: new Date()
  },{
      date: new Date(),
      date2: new Date()
  },{
      date: new Date(),
      date2: new Date()
  }]      
};
setInterval(function() {
  console.log(data);
}, 10000);

在中，记录器将显示为：

{
  "date": "2017-01-01T03:19:46.944Z",
  "prop2": "sfgsdgsd",
  "arrayProp": [
    "key1",
    "key2",
    "key3"
  ],
  "arrayOfObjectsProp": [
    {
      "date": "2017-01-01T03:19:46.944Z",
      "date2": "2017-01-01T03:19:46.944Z"
    },
    {
      "date": "2017-01-01T03:19:46.944Z",
      "date2": "2017-01-01T03:19:46.944Z"
    },
    {
      "date": "2017-01-01T03:19:46.944Z",
      "date2": "2017-01-01T03:19:46.944Z"
    }
  ]
}

您可以将old
console.log
分配给一个名为
oldlog
的变量，然后将自己的函数分配给
console.log
，该函数将完成所有必要的操作，最后调用
oldlog
，将给定的文本作为参数传递

var oldlog = console.log
console.log = function(...args) {
  // do something fancy with text passed
  oldlog(...args);
}

编辑
正如KevBot所提到的，
console.log
可以接受无限数量的参数，因此，为了涵盖所有情况，您的函数应该允许这种行为。这可以通过调用ES6特性来实现，也可以在不依赖ES6的情况下，使用
参数
类似数组的对象来实现，如num8er的回答中所述

另外，正如Oriol所提到的，一些浏览器不允许在
控制台上调用
oldlog
。这可以通过改变线路来解决

oldlog(...args)

在您的自定义
控制台中。登录到

oldlog.call(console, ...args)

首先，您必须了解
console.log
接受动态数量的参数

因此，您不应该以：
console.log=function（text）{}

您必须获取magic变量
参数
，然后在自定义函数中调用原始日志函数

请看这个例子：


console.log2=console.log；//以新名称保留原始函数
console.log=函数（）{
//将参数对象转换为数组
var args=Array.prototype.splice.call（参数，0）；
//使用args调用原始日志函数
console.log2.apply（这是args）；
//做点别的。。。
document.getElementById（'debug-bar'）。innerHTML='debug:'+args.join（''）；
};
setInterval（函数（）{
console.log（新日期（））；
}, 1000);
不要忘记
console.log（）
可以接收
n
个参数。某些浏览器不允许在
控制台
对象上调用
oldlog
。您应该使用
call
或
apply
。并且在mozilla dev的网络网站上告诉您无需等待ES6（：StackOverflow编辑器在您的演示中显示的console log DIV实际上就是我试图实现的。我想在JS库中做一个非常轻量级的下降，在DOM中添加一个console logger DIV，它将管道console.log调用转换为itand格式，并像控制台那样显示对象和数组等StackOverflow的演示它可以根据我的需要处理对象、数组和嵌套项。我更新了我的问题来说明我的意思。你知道怎么做这样的日志记录程序吗？我刚刚发现有JS文件将其导入，因为页面可以在任何地方工作！