在页面内的 div 中显示控制台错误和警报
Posted
技术标签:
【中文标题】在页面内的 div 中显示控制台错误和警报【英文标题】：Showing console errors and alerts in a div inside the page 【发布时间】：2011-09-30 01:23:07 【问题描述】：我正在为我的 Web 应用程序构建一个调试工具，我需要在 div 中显示控制台错误。我知道我可以使用自己制作的类似对象的控制台并使用它，但是为了将来的使用，我需要将所有控制台错误发送到窗口。其实我想捕捉控制台事件。
【问题讨论】：
以下是我最终发现的有用信息：***.com/a/37081135/470749 ***.com/a/43725214/470749 下面很酷。 github.com/bahmutov/console-log-div - 非常有用且全面 【参考方案1】：这里的答案都没有考虑传递多个参数的控制台消息。例如。 console.log("Error:", "error details"))。
替换默认日志函数的函数更好地考虑所有函数参数（例如，通过使用arguments 对象）。这是一个例子：
console.log = function()
log.textContent += Array.prototype.slice.call(arguments).join(' ');
（Array.prototype.slice.call(...) 只是将arguments 对象转换为数组，因此可以轻松地与join() 连接。）
当原始日志也应该保持工作时：
console.log = (function (old_log, log)
return function ()
log.textContent += Array.prototype.slice.call(arguments).join(' ');
old_log.apply(console, arguments);
;
(console.log.bind(console), document.querySelector('#log')));
一个完整的解决方案：
var log = document.querySelector('#log');
['log','debug','info','warn','error'].forEach(function (verb)
console[verb] = (function (method, verb, log)
return function ()
method.apply(console, arguments);
var msg = document.createElement('div');
msg.classList.add(verb);
msg.textContent = verb + ': ' + Array.prototype.slice.call(arguments).join(' ');
log.appendChild(msg);
;
)(console[verb], verb, log);
);
（使用多个参数发出消息的框架的一个示例是 Video.js。但当然还有很多其他的。）
编辑：多个参数的另一个用途是控制台的格式化功能（例如console.log("Status code: %d", code)。
关于未显示的错误
（2021 年 12 月更新）
如果任何代码因未捕获的错误而崩溃，则 in 可能不会显示在 div 中。如果可能的话，一种解决方案可能是将所有代码包装在 try 块中以捕获此类错误并将它们手动记录到 div。
try
// Code that might throw errors...
catch(err)
// Pass the error to the overridden error log handler
console.error(err);
【讨论】：
+1。这是一个比大多数人更深思熟虑的答案。但如果你能以某种方式为每个arguments 输出JSON.stringify() 结果会更好，因为它们通常是对象。目前它只是输出[object Object]，我还没有弄清楚在你的代码中在哪里使用JSON.stringify()。不过，感谢您的开始。
我也花了一段时间才意识到我需要将您的代码放入$(document).ready(function () ... );
啊，我认为msg.textContent = verb + ' ' + JSON.stringify(Array.prototype.slice.call(arguments)); 有效。
这是最接近我正在寻找的东西。虽然我仍然无法收到 Uncaught ReferenceError、GET 错误或控制台上出现的任何其他错误。有什么方法可以实时返回任何错误？【参考方案2】：
我为这种情况创建了一个零依赖npmmodule：console-events（当然，如果你可以使用 nodejs ：P）
你可以像这样添加事件监听器：
const console = require('console-events');
console.addEventListener('log', (e) =>
e.preventDefault(); //if you need to prevent normal behaviour e.g. output to devtools console
$('#debugDiv').append('<p>' + message + '</p>');
)
【讨论】：
能否请您添加代码sn-p。如何在浏览器脚本中添加require？ 它是一个 npm 模块，你可以使用webpack 或 gulp 将它捆绑到你的 javascript 中，所以 require 会自动将模块代码放入你的输出 JS 中【参考方案3】：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="logger" class="web_console"></div>
<script type="text/javascript">
// Overriding console object
var console = ;
// Getting div to insert logs
var logger = document.getElementById("logger");
// Adding log method from our console object
console.log = function(text)
var element = document.createElement("div");
var txt = document.createTextNode(text);
element.appendChild(txt);
logger.appendChild(element);
// testing
console.log("Hello World...");
console.log("WOW");
/**
console.log prints the message in the page instead browser console, useful to programming and debugging JS using a android phone
*/
</script>
</body>
</html>
【讨论】：
【参考方案4】：这是一种使用闭包的方法，在新的范围内包含旧的控制台日志功能。
console.log = (function (old_function, div_log)
return function (text)
old_function(text);
div_log.value += text;
;
(console.log.bind(console), document.getElementById("error-log")));
【讨论】：
我通过使用div_log.textContent += text;得到它的工作
添加 console.error = console.log = (function... 使我的工作出错。这也适用于其他console.[whatever]。还需要 @srgsanky 的更改才能对我的工作。
是的 textContent 看起来确实是今天使用的正确属性。 Justin - 当您覆盖浏览器 API 时，通常您希望存储对 API 的引用并调用 API，因此您分配的新函数仍应调用旧的 console.error 或 console.log 函数。如果你用一个函数设置多个 attrs，我认为这是无法做到的——需要多个函数。
这行得通！但是通过使用 div_log.innerHTML += text + '';会更清楚【参考方案5】：
否则，如果您担心将 log、warn 和 error 彼此分开，您可以这样做（改编自 MST 的回答）：
var log = document.querySelector('#log');
['log','warn','error'].forEach(function (verb)
console[verb] = (function (method, verb, log)
return function (text)
method(text);
// handle distinguishing between methods any way you'd like
var msg = document.createElement('code');
msg.classList.add(verb);
msg.textContent = verb + ': ' + text;
log.appendChild(msg);
;
)(console[verb].bind(console), verb, log);
);
#log 是您的 HTML 元素。变量verb 是'log'、'warn' 或'error' 之一。然后，您可以使用 CSS 以可区分的方式设置文本样式。请注意，其中很多代码与旧版本的 IE 不兼容。
【讨论】：
已检查。本主题中的最佳控制台解决方案。 这没有捕获任何仍然发送到 Chrome 开发工具输出的错误。 完美答案。我在 Codepen 中测试过【参考方案6】：要保持控制台正常工作：
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
【讨论】：
只是认为对!= "undefined" 的检查只是部分完成，稍后我们无论如何都会分配给console.log ...
对于那些这个解决方案不起作用的人：你有没有考虑过，这个解决方案需要 jQuery 因为这个选择器 $('#debugDiv') ？尝试使用类似的东西：document.getElementById('debugDiv').innerHTML += ('<p>' + message + '</p>');【参考方案7】：
这样简单的事情怎么样：
console.log = function(message) $('#debugDiv').append('<p>' + message + '</p>');;
console.error = console.debug = console.info = console.log
【讨论】：
我对你的回答投了赞成票。这真的很聪明。但它导致实际控制台停止工作 @DannyBeckett 仅使用 document.getElementById 进行编辑比在 2011 年的答案上拖钓 -1 更具建设性。 这可能会发送在 JS 中硬编码的控制台消息，但不会发送浏览器自身的错误。 @johnywhy - 我们如何访问浏览器自身的错误？ @AndrewPaul 我希望我知道。以上是关于在页面内的 div 中显示控制台错误和警报的主要内容，如果未能解决你的问题，请参考以下文章