我正在为我的 Web 应用程序构建一个调试工具，我需要在 div 中显示控制台错误。我知道我可以使用自己制作的类似对象的控制台并使用它，但是为了将来的使用，我需要将所有控制台错误发送到窗口。其实我想捕捉控制台事件。
【问题讨论】：
标签： javascript browser
这里的答案都没有考虑传递多个参数的控制台消息。例如。 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);
}
【讨论】：
arguments 输出JSON.stringify() 结果会更好，因为它们通常是对象。目前它只是输出[object Object]，我还没有弄清楚在你的代码中在哪里使用JSON.stringify()。不过，感谢您的开始。
$(document).ready(function () { ... });
msg.textContent = verb + ' ' + JSON.stringify(Array.prototype.slice.call(arguments)); 有效。
我为这种情况创建了一个零依赖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>');
})
【讨论】：
webpack 或 gulp 将它捆绑到你的 javascript 中，所以 require 会自动将模块代码放入你的输出 JS 中
<!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>
【讨论】：
这是一种使用闭包的方法，在新的范围内包含旧的控制台日志功能。
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 的更改才能对我的工作。
console.error 或 console.log 函数。如果你用一个函数设置多个 attrs，我认为这是无法做到的——需要多个函数。
否则，如果您担心将 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 不兼容。
【讨论】：
要保持控制台正常工作：
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 ...
$('#debugDiv') ？尝试使用类似的东西：document.getElementById('debugDiv').innerHTML += ('<p>' + message + '</p>');
这样简单的事情怎么样：
console.log = function(message) {$('#debugDiv').append('<p>' + message + '</p>');};
console.error = console.debug = console.info = console.log
【讨论】：