在页面内的 div 中显示控制台错误和警报
[英]Showing console errors and alerts in a div inside the page
问题描述
我正在为我的 web 应用程序构建一个调试工具，我需要在 div 中显示控制台错误。 我知道我可以使用自己制作的控制台，如 object 并使用它，但为了将来的使用，我需要将所有控制台错误发送到 window。 其实我想捕捉控制台事件。
7 个解决方案
解决方案1
69 已采纳 2011-07-07 00:45:48
要保持控制台正常工作：
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
解决方案2
31 2013-08-10 01:43:34
这是一种使用闭包的方法，在新控制台的 scope 中包含旧控制台日志 function。
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")));
解决方案3
11 2014-01-09 01:01:55
否则，如果您担心将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 不兼容。
解决方案4
11 2017-05-01 19:28:37
这里的答案都没有考虑传递多个参数的控制台消息。 例如console.log("Error:", "error details") )。
The function that replaces the default log function better regards all function arguments (eg by using the arguments object). 这是一个例子：
console.log = function() {
log.textContent += Array.prototype.slice.call(arguments).join(' ');
}
（ Array.prototype.slice.call(...)只是将arguments object 转换为数组，因此可以使用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) 。
解决方案5
7 2011-07-07 00:03:00
像这样简单的事情怎么样：
console.log = function(message) {$('#debugDiv').append('<p>' + message + '</p>');};
console.error = console.debug = console.info = console.log
解决方案6
0 2019-04-06 16:02:28
<!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>
解决方案7
0 2019-11-15 07:36:50
我为这种情况创建了一个零依赖npm模块： 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>');
})
console.log 正在工作，但我无法收到任何警报。 三个警报都没有出现。 需要做什么？
[英]console.log is working but I can't get any alerts. None of the three alerts are showing up. What need to be done?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.