javascript - 交叉 JavaScript console.log() 调用并将数据发送到我自己的记录器函数

Question

我如何劫持对浏览器 console.log 的调用并将它们发送到我自己的日志函数，同时仍然让它们在那里进行正常的 console.log 条目。

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

所以每次我调用 console.log('my log msg'); 它应该表现得像正常一样，但也会将控制台日志数据通过管道/发送到我自己的 JavaScript logger.log ('日志条目') 函数。

如何做到这一点？

---

更新

对象的所需自定义记录器输出:

记录这个对象:

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);

在 Logger 中将显示为:

{
  "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"
    }
  ]
}

Answer 1

您可以将旧的 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 可以接受无限数量的参数，因此，为了涵盖所有情况，您的函数应该允许这种行为。这可以使用名为 rest parameters 的 ES6 功能来完成或者，在不依赖 ES6 的情况下，使用 arguments 类数组对象，如 num8er 的回答中所述

此外，正如 Oriol 所提到的，某些浏览器不允许 oldlog 在 console 上调用。这可以通过更改行来解决

oldlog(...args)

在你自定义的 console.log 中

oldlog.call(console, ...args)