Question

我如何劫持对浏览器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);

在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功能完成，或者使用arguments类似数组的对象，而不依赖于ES6，如num8er的回答中所述

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

在自定义console.log至
中
oldlog.call(console, ...args)

Answer 2

首先，你必须明白console.log需要动态数量的参数。

所以你不应该用console.log = function(text) {}

结束你的工作

您需要获取魔术变量arguments，然后在自定义函数内调用原始日志函数。

所以看看这个例子：

console.log2 = console.log; // keeping original function under new name

console.log = function() {
  // converting arguments object to array
  var args = Array.prototype.splice.call(arguments, 0); 
   
  // calling original log function with args
  console.log2.apply(this, args); 

  // doing something else...      
  document.getElementById('debug-bar').innerHTML = 'Debug: '+ args.join(' ');
};

setInterval(function() {
  console.log(new Date());
}, 1000);

<div id="debug-bar"></div>

P.S。如果它是nodejs应用程序，那么您可以使用非常灵活的winston包进行自定义。

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

更新

2 个答案: