Question

我想找到一种更好的方法来将控制台消息输出到HTML页面。这种方法似乎很慢。

<html>
<title>Logging test</title>
<head>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--

function log(s) {
    if(!log.start) {
        var date = new Date();
        log.count = 0;
        _log("0", "log() started at " + date);
        log.start = date.valueOf();
    }
    _log(new Date().valueOf() - log.start, s);
}

function _log(header, s) {
    var logMessages = document.getElementById("logMessages");
    if(!logMessages) {
        alert(logMessages);
        return;
    }
    var message = document.createElement("div");
    message.className = "logMessage";
    var content = "";
    content += "<span class=\"time\">" + header + "</span>";
    content += "<span class=\"line\">" + (log.count++) + "</span>";
    content += "<span class=\"level\">" + "" + "</span>";
    content += "<span class=\"msg\">" + s.replace(/ /g, "&nbsp;").replace(/\n/g, "<BR />") + "</span>";
    message.innerHTML = content;
    logMessages.appendChild(message);
    setTimeout(function(){message.scrollIntoView(true)},1);
}

function main(e) {
    if(window.confirm("Would you like to display logging?")) {
        for(var i=0;i<5000;i++) {
            log("Hello World " + i);
        }
    }
}
//-->
</SCRIPT>

<style>
.logMessage {
    border-bottom: 1px black solid;
    font-size: 8pt;
    font-family: Lucida Console;
}

.logMessage .line, .logMessage .time {
    width: 30px;
}

.logMessage .level {
    display: none;
}

.logMessage .msg {
}

#logMessages {
    overflow: auto;
}
</style>

</head>
<body onload="main()">
<div id="logMessages"></div>
</body>

</html>

Answer 1

Firebug很好你是否正在使用Firefox来测试你的工作（假设你想记录消息以进行调试）。如果您正在测试其他浏览器，您还可以使用Firebug Lite模仿其他浏览器中的Firebug功能。这样你就不必重新发明轮子了。

Answer 2

这里的用例是什么？对于调试，Firebug的console.log是我能想象到的。对于你的特定情况，如果你真的希望它进入页面并发现你当前的解决方案太慢，我肯定会用更高效的东西替换所有字符串连接（将字符串推入数组并加入它们最后，或者是一个将其抽象出来的StringBuffer，因为Javascript中的字符串操作是infamously bad中的some browsers（我正在看着你，Redmond！）

使用DHTML进行控制台的更好方法是什么？

2 个答案: