修改Log4Javascript的UI

Question

我有log4javascript设置，因此它显示如下日志：

但是，我想摆脱一些东西，而不是希望用户界面如下：

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

Answer 1

不容易，我害怕。 log4javascript没有提供任何选项来执行此操作，并且log4javascript控制台嵌入在iframe中，使CSS的自定义变得困难。我将在log4javascript 2.0中添加一个配置选项。

您可以创建自己的简化appender，但这需要一些工作。更简单的替代方法是使用appender的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";
        }
    }
});

Answer 2

我不确定是否有配置选项，但是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);