javascript - 修改Log4Javascript的UI

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

但是，我想摆脱一些东西，而是希望UI如下所示:

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

最佳答案

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