Javascript 重写console.log等以在HTML视图中显示

因此，我正在从事一个项目，在这个项目中，实际的生产环境可以访问API，我只能在生产环境中加载页面（他们使用

angular.$window.external

），但在生产环境中加载页面意味着我无法访问开发工具、控制台、，等等，因为它在应用程序浏览器实例中运行。因此，我试图将所有控制台日志/etc语句输出到文档中的一个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

我将

标记放在HTML文档的末尾，就在

标记的前面

当我在常规chrome窗口中运行时，我的HTML正文中会出现以下行：

log: test

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

但是Chrome的日志显示了另外一个错误

myhtml.html:35未捕获引用错误：myhtml.html:35中未定义someOtherProprietaryAPI

关于为什么我的函数没有捕捉到这一点，或者我可以对此做些什么，有什么建议吗？还是将所有控制台输出输出输出到HTML文档本身的替代方法

我尝试将脚本包含在文件的顶部，但所做的只是给了我两个错误，即无法附加到null（对于它捕获的两个日志条目，但对于第三个日志条目，它没有）

我对Javascript非常陌生，我试图在新版本的生产环境中使用现有的AngularJS代码，该环境已从使用IE切换到使用Chromium进行HTML显示

编辑：将足够的代码放在一个文档中。如您所见，控制器中的
console.log（'test'）
会记录到文档中，但html文档正文中未捕获的引用错误不会记录到文档中。
一些增强功能：

为加载完整dom之前发生的错误创建消息队列数组
使用
window.addEventListener（'error'，callback）
在定义新控制台后侦听执行错误
等待dom加载以查询
logDiv
。在定义之前，将消息推送到消息队列中，然后在dom加载时检查该队列中的任何内容
当你说AngularJs（AngularJs 1.x）时，你指的是AngularJs？很不幸，是的。项目中的各种文件目前也依赖于AngularJS的不同版本。“这很痛苦。你能在沙盒网站的工作演示中重现吗？”charlietfl补充道。谢谢！看来是这样的。当然，我在尝试让它在TypeScript中工作时也有一段时间感到困惑，但它现在正在工作，应该可以帮助我了解什么是无声的，什么不是无声的。
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)
})