在浏览器中订阅控制台事件

Question

有没有办法从页面上的javascript订阅某些控制台事件？

用例：我想在任何js错误上看到一个警报窗口

就像是：

console.on('error', => alert('There is an error! Look in console window'))
console.on('log', => alert('Something log to console'))

注意：我不问捕捉异常。

Answer 1

按照我之前的评论中的链接说明，我创建了一个JSFiddle-Override Console方法 。

我仍然不知道这是否是最好的方法，但这似乎可行。

编辑

经过讨论，我了解到，问题不仅在于捕获所有控制台消息，还在于捕获任何未处理的错误。 以我的理解，唯一的实现方法是添加一个全局异常处理程序

window.onerror = function(error){
    // do your stuff
}

以下是更新的JSFiddle 。 我还更新了代码片段以显示相同内容。

码

 var error = window.console.error, log = console.log, info = console.info, warn = console.warn; var lastLog = "", lastError="", lastInfo="", lastWarn=""; function overrideConsole(){ console.error = function () { lastError = arguments; //alert(lastError); print(lastError, "error") error.apply(console, arguments); }; console.log = function () { lastLog = arguments; print(lastLog, "log"); log.apply(console, arguments); }; console.info = function () { lastInfo = arguments; print(lastInfo, "info"); info.apply(console, arguments); }; console.warn = function () { lastWarn = arguments; print(lastWarn, "warn"); warn.apply(console, arguments); }; } function registerEvents(){ $("#btnError").on("click", function(){ console.error("new error"); }); $("#btnLog").on("click", function(){ console.log("new log"); }); $("#btnInfo").on("click", function(){ console.info("new info"); }); $("#btnWarn").on("click", function(){ console.warn("new warn"); }); $("#btnException").on("click", function(){ throw new Error(); }); } function registerGlobalHandler(){ window.onerror = function(error) { console.error(error); }; } function print(str, type){ var msgClass= ""; switch(type){ case "log": msgClass=" log"; break; case "error": msgClass=" error"; break; case "info": msgClass=" info"; break; case "warn": msgClass=" warn"; break; } var div = "<div class='cell'>"+ "<label class='"+msgClass+"'>"+ str[0]+"</label>" + "</div>" $(".content").html( div + $(".content").html()); } (function init(){ registerEvents(); registerGlobalHandler(); overrideConsole(); // Undefined function call test(); })(); 

 .cell{ width:90%; position:relative; padding:5px; background: #eee; } .info{ color:blue; } .error{ color:red; } .warn{ color:green; } .log{ color:black; } .content{ width:90%; height:300%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id="btnError">Error</button> <button id="btnLog">Log</button> <button id="btnInfo">Info</button> <button id="btnWarn">Warn</button> <button id="btnException">Exception</button> <div class="content"></div> 

Answer 2

正如已经指出的那样，（我知道）没有全局方式可以订阅控制台事件。 日志记录的部分解决方案是覆盖控制台，如@Rajesh的答案所述。

对于错误检查，如果您拥有要检查错误的代码，则可以将整个内容包装在全局try/catch 。

try {

  (function() {
    function failingCode() {
      var a;
      return a.foo + 1;

    }

    failingCode();
  })();

}
catch (err) {
  alert('error');
  throw err;
}

对于第三方脚本，除了通过jQuery的getScript类的机制加载脚本之外，我无法想到任何其他处理方式。 而且我不清楚如果该脚本本身加载其他脚本会发生什么。