修改Log4Javascript的UI

我有log4 javascript设置,以便它显示如下日志：

但是,我想摆脱一些东西,而是希望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);