修改Log4Javascript的UI

Question

我有log4javascript设置,以便它显示如下日志:

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

如何才能做到这一点？我正在使用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";
        }
    }
});