Javascript:console.log到html

我想将console.log输出写入div层

例如：

document.write(console.log(5+1)); //Incorrect, random example

console.log("hi");

有人能给我一个解决问题的办法吗

多谢各位

编辑：

我的意思是，例如：

document.write(console.log(5+1)); //Incorrect, random example

console.log("hi");

并在屏幕上显示输出“hi”

---

注意：例如：

您可以覆盖

console.log（）的默认实现

（函数（）{
var old=console.log；
var logger=document.getElementById（'log'）；
console.log=函数（消息）{
如果（消息类型=='object'）{
logger.innerHTML++=（JSON&&JSON.stringify？JSON.stringify（message）：message）+'
'；
}否则{
logger.innerHTML+=message+'
'；
}
}
})();

演示：
创建输出

<div id="output"></div>

如果希望它处理更复杂的输出值，可以使用
JSON.stringify

var myObj = {foo: "bar"};
output.innerHTML = JSON.stringify(myObj);

@arun-p-johny答案稍有改进：

在html中

<pre id="log"></pre>

我带了一个更高级版本的。他的解决方案不能处理多个
console.log（）
参数，也不能访问原始函数

以下是我的版本：


（功能（记录器）{
console.old=console.log；
console.log=函数（）{
var输出=”，arg，i；
对于（i=0；i”；
console.old.apply（未定义，参数）；
};
})（document.getElementById（“logger”）；
//测试
log（“Hi！”，{a:3，b:6}，42，true）；
log（“多个”、“参数”、“此处”）；
console.log（null，未定义）；
console.old（“哎呀，那是个又老又无聊的家伙。”）
body{背景：#333；}
.log布尔值，
.log未定义{颜色：洋红色；}
.log对象，
.log字符串{颜色：橙色；}
.log编号{颜色：青色；}
参加聚会有点晚了，但我走得更远了一点

现在，所有控制台方法都已重新布线，如果文本溢出，则可选。颜色现在基于日志记录方法，而不是参数


rewireLoggingToElement(
（）=>document.getElementById（“日志”），
（）=>document.getElementById（“日志容器”），true）；
函数RewirelogingToElement（eleLocator、eleOverflowLocator、autoScroll）{
fixLoggingFunc（“日志”）；
fixLoggingFunc（“调试”）；
fixLoggingFunc（“警告”）；
fixLoggingFunc（“错误”）；
fixLoggingFunc（“信息”）；
函数fixLoggingFunc（名称）{
控制台['old'+name]=控制台[名称]；
控制台[名称]=函数（…参数）{
const output=produceOutput（名称、参数）；
常量eleLog=eleLocator（）；
如果（自动滚动）{
const eleContainerLog=eleOverflowLocator（）；
常量IsCrolledTobottom=eleContainerLog.scrollHeight-eleContainerLog.clientHeight{
返回输出+
"" +
（typeof arg==“object”&&（JSON |{}）.stringify？JSON.stringify（arg）：arg）+
" ";
}, '');
}
}
设置间隔（（）=>{
const method=（['log'，'debug'，'warn'，'error'，'info'][Math.floor（Math.random（）*5）]；
控制台[方法]（方法“记录某物…”）；
}，200）；
#日志容器{溢出：自动；高度：150px；}
.log警告{颜色：橙色}
.log错误{颜色：红色}
.log信息{color:skyblue}
.log日志{颜色：银色}
.log警告.log错误{font-weight:bold；}
这篇文章对我帮助很大，经过几次迭代后，这就是我们所使用的

其思想是将日志消息和错误发布到HTML中，例如，如果您需要调试JS而无法访问控制台

您确实需要将“console.log”更改为“logThis”，因为不建议更改本机功能

您将得到：


一个简单明了的“logThis”函数，可以显示字符串和对象
每行的当前日期和时间
一个位于所有其他窗口之上的专用窗口。（仅在需要时显示）
可以在“.catch”中使用，以查看承诺中的相关错误
默认console.log行为没有更改
消息也将出现在控制台中


函数日志（此消息）{
//如果我们传递一个错误对象，message.stack将包含所有详细信息，否则给我们一个字符串
如果（消息类型=='object'）{
message=message.stack | | objToString（message）；
}
控制台日志（消息）；
//使用当前时间创建消息行
var today=新日期（）；
var date=today.getFullYear（）+'-'+（today.getMonth（）+1）+'-'+today.getDate（）；
var time=today.getHours（）+'：'+today.getMinutes（）+'：'+today.getSeconds（）；
var dateTime=日期+“”+时间+“”；
//插入行
document.getElementById（'logger'）.insertAdjacentHTML（'afterbegin'，dateTime+message+'
'）；
}
功能对象化（obj）{
var str='对象：'；
用于（obj中的var p）{
if（对象hasOwnProperty（p））{
str+=p+'：：'+obj[p]+'，\n'；
}
}
返回str；
}
常量对象1={
a:‘某物串’，
b:42，
c:错
};
logThis（object1）
logThis（“我们要走的路都是曲折的，所有的灯光都让我们看不见东西”）
#日志窗口{
溢出：自动；
位置：绝对位置；
宽度：90%；
身高：90%；
最高：5%；
左：5%；
右：5%；
底部：5%；
背景色：rgba（0,0,0,0.5）；
z指数：20；
}
console.log
和
document.write
都是副作用，它们
(function () {
    var old = console.log;
    var logger = document.getElementById('log');
    console.log = function () {
      for (var i = 0; i < arguments.length; i++) {
        if (typeof arguments[i] == 'object') {
            logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(arguments[i], undefined, 2) : arguments[i]) + '<br />';
        } else {
            logger.innerHTML += arguments[i] + '<br />';
        }
      }
    }
})();

console.log('How', true, new Date());