javascript - 如何在 div 上显示所有控制台消息？

Question

我有这个代码:

 if (typeof console  != "undefined")
          if (typeof console.log != 'undefined')
            console.olog = console.log;
          else
            console.olog = function() {};

        console.log = function(message) {
          console.olog(message);
          $('#debugDiv').append('<p>' + message + '</p>');
        };
        console.error = console.debug = console.info =  console.log

这对于简单的控制台日志非常有用，但我想要那里的一切!浏览器中的控制台向我显示的所有内容，我想要在那个 div 中:

例如:

  i170.png:1 GET http://localhost:3000/modules/core/img/items/i170.png 404 (Not Found)
    i183.png:1 GET http://localhost:3000/modules/core/img/items/i183.png 404 (Not Found)

没有显示在我创建的 div 中，我怎样才能让它全部显示在那里？

Answer 1

这里有两个问题。

1) 转储传递给 console.log 的所有参数

您在arguments 中获得函数的所有参数.所以这是一个可能的解决方案。

改变

console.log = function(message) {
      console.olog(message);
      $('#debugDiv').append('<p>' + message + '</p>');
};

到

console.log = function() {
      console.olog.apply(console, arguments);
      $('#debugDiv').append('<p>' + [].map.call(arguments, JSON.stringify) + '</p>');
};

2) 获取所有错误

最简单的解决方案是添加

window.onerror = console.log;

但请注意，有些错误不会触发 onerror 并且无法在 JS 中捕获。