覆盖 console.log 等以显示在 HTML 视图中

Question

因此，我正在开发一个项目，其中实际生产环境可以访问我无法获得的 API，除非在生产环境中加载页面（他们使用angular.$window.external ），但加载页面内部生产意味着我无法访问开发人员工具、控制台等，因为它在应用程序内浏览器实例中运行。 因此，我尝试将 output 所有控制台日志/等语句放入文档中的 div 中，以尝试在我的 API 调用无法按预期工作时进行故障排除。

我得到了它的工作，但它错过了一些东西，我不知道为什么。

我作为consoledebug.js包含的代码：

// Code adapted from https://stackoverflow.com/a/5677825/12869266
// Include consoledebug.js at the end of a file, and create a div with
// the id "logs" in your html file where you want output.

var logDiv = document.getElementById('logs')

var addToLogDiv = function (type, text) {
  var node = document.createElement('p')
  node.className = type
  var content = document.createTextNode(type + ': ' + text)
  node.appendChild(content)
  logDiv.appendChild(node)
}

// define a new console
var console = (function (oldCons) {
  return {
    log: function (text) {
      oldCons.log(text)
      addToLogDiv('log', text)
    },
    info: function (text) {
      oldCons.info(text)
      addToLogDiv('info', text)
    },
    warn: function (text) {
      oldCons.warn(text)
      addToLogDiv('warn', text)
    },
    error: function (text) {
      oldCons.error(text)
      addToLogDiv('error', text)
    }
  }
})(window.console)

//Then redefine the old console
window.console = console

我将<script src="../common/consoledebug.js"></script>标签放在 HTML 文档的末尾，就在</body>标签之前。

当我在常规 chrome window 中运行时，我在 HTML 正文中得到这些行：

log: test

error: TypeError: $window.external.SomeProprietaryAPI is not a function

但是 Chrome 的日志显示了一个额外的错误myhtml.html:35 Uncaught ReferenceError: someOtherProprietaryAPI is not defined at myhtml.html:35

关于为什么这没有被我的 function 捕获的任何建议或我能做些什么？ 或者 output所有控制台 output 到 HTML 文档本身的替代方法？

我尝试在文件顶部包含脚本，但所做的只是给了我 2 个错误，因为无法将 append 到 null （对于它正在捕获的 2 个日志条目，但不是对于它不是的第三个日志条目） .

我对 Javascript 很陌生，并试图获取现有 AngularJS 代码的基础，该代码在新版本的生产环境中工作，该生产环境已从使用 IE 切换到用于 Z4C4AD5FCA2E7A3F74DBB1CED00381AAZ4 显示的 Chromium。

编辑：在Plunker中放置足够的代码以使其相关。 如您所见，controller 中的console.log('test')被记录到文档中，但 html 文档正文中的未捕获参考错误没有。

Answer 1

一些增强功能：

1. 为在完整 dom 加载之前发生的错误创建一个消息队列数组。
2. 定义新控制台后，使用window.addEventListener('error', callback)监听执行错误
3. 等待 dom 加载以查询logDiv 。 在定义之前将消息推送到消息队列中，然后在 dom 加载时检查该队列中的任何内容

let logDiv, messageQueue =[];

window.addEventListener('load', function(){
    // assign the log element
    logDiv = document.getElementById('logs');
    if(messageQueue.length){
        // print your preload errors
        messageQueue.forEach(([type,text])=>addToLogDiv(type,text))
    }
})

var addToLogDiv = function (type, text) {
  if(logDiv){
    var node = document.createElement('p')
    node.className = type
    var content = document.createTextNode(type + ': ' + text)
    node.appendChild(content)
    logDiv.appendChild(node)
  }else{
    // before logDiv defined store any errors
    messageQueue.push([type, text]) 
  } 
}

// define a new console
var console = (function (oldCons) {
  return {
    // same as before
  }
})(window.console)

//Then redefine the old console
window.console = console
// after new console created
window.addEventListener('error', function(e){
  console.log(e.message)
})

头部演示