javascript - 修改 Log4Javascript 的 UI

Question

我有 log4javascript 设置，以便它显示如下日志：

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

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

Answer 1

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

您可以创建自己的简化附加程序，但这需要一些工作。load一个更简单的替代方法是使用 appender 的事件删除您不想要的 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

我不确定是否有配置选项，但这个 jsfiddle 可能会让你开始：

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);