修改Log4Javascript的UI

Question

我对log4javascript进行了设置，使其显示如下日志：

​

然而，我想去掉一些东西，相反，我希望UI如下所示：

​

如何做到这一点？我正在使用InPageAppender

Answer 1

我不确定是否有配置选项，但是this jsfiddle might get you started

HTML

这里有一个延迟的log.debug，用于检查隐藏工具栏是否不会破坏日志记录。

<script src="http://log4javascript.org/js/log4javascript.js"></script>
<script type="text/javascript">
    var log = log4javascript.getLogger("main");
    var appender = new log4javascript.InPageAppender();
    log.addAppender(appender);
    log.debug("This is a debugging message from the log4javascript in-page page");
    setTimeout(function() {
        log.debug("This is a debugging message from the log4javascript in-page page");
    }, 2000);
</script>

JS

此代码等待log4javascript load事件激发，然后隐藏工具栏。

function removeSwitchesContainers() {
    var iframes = document.querySelectorAll("iframe");
    iframes = Array.prototype.slice.call(iframes);
    iframes.filter(function (iframe) {
        return iframe.id && iframe.id.match(/log4javascript_\d+_\d+_InPageAppender_\d+/);
    });
    if (iframes.length < 1) {
        return;
    }
    var iframe = iframes[0];
    var sc = iframe.contentWindow.document.querySelectorAll("#switchesContainer");
    sc = Array.prototype.slice.call(sc);
    sc.forEach(function (switchesContainer) {
        switchesContainer.style.display = "none";
    });
}

log4javascript.addEventListener("load", removeSwitchesContainers);

Answer 2

恐怕不是那么容易。log4javascript没有提供任何这样做的选项，而且log4javascript控制台被嵌入到iframe中，这使得定制CSS变得很困难。我将在log4javascript 2.0中为此添加一个配置选项。

您可以创建自己的简化附加器，但这需要一些工作。一种更简单的替代方法是使用附加器的load事件删除不需要的UI：

var appender = new log4javascript.InPageAppender();
appender.addEventListener("load", function() {
    // Find appender's iframe element
    var iframes = document.getElementsByTagName("iframe");
    for (var i = 0, len = iframes.length; i < len; ++i) {
        if (iframes[i].id.indexOf("_InPageAppender_") > -1) {
            var iframeDoc = iframes[i].contentDocument || iframes[i].contentWindow.document;
            iframeDoc.getElementById("switchesContainer").style.display = "none";
            iframeDoc.getElementById("commandLine").style.display = "none";
        }
    }
});