一個Javascript的Logger Console(帶示範)

一個簡單的Javascript日誌控制台，能動態地在當前頁面中添加一個視窗半透明效果。
初始化代碼如下：
 JSLogger.enable(true);

而在js代碼中使用
    JSLogger.debug( "your log message");

就可以將日誌記錄到該視窗中。
下面是該Logger的示範（注意看最左側的側邊欄，按一下滑鼠可切換）

記錄

附上幾幅實際應用中的：
日誌視窗的如下

按一下滑鼠可以縮小到側邊欄（如）

完整的JSLogger實現如下：
JSLogger = function()
{
    this.m_bFullShow = false;
  
    this.m_bEnabled = false;
    this.isEnabled = function() {
        return this.m_bEnabled;
    };
  
    this.enable = function(bEnabled) {
        if (this.m_bEnabled != bEnabled) {
            this.m_bEnabled = bEnabled;
            this.updateView();
        }
    };

    /*    數組實現的迴圈隊列    */
    this.m_bOverflowed = false;
    this.m_nMaxLine = (document.body.clientHeight / 14).toFixed();
    this.m_nBeginLine = 0;
    this.m_nEndLine = -1;
    this.m_msgLines = new Array();
      
    this.getMaxLine = function() {
        return this.m_nMaxLine;
    };
  
    this.setMaxLine = function(nMaxLine) {
        this.m_nMaxLine = nMaxLine;
    };
  
    this.switchView = function() {
        var obj = this.getObject();
        var contentObj = this.getContentObject();
      
        this.m_bFullShow = !this.m_bFullShow;
      
        if (obj && contentObj) {
            if (this.m_bFullShow) {
                obj.style.width = "100%";
                contentObj.style.DISPLAY = "block";
            }
            else {
                obj.style.width = "8px";
                contentObj.style.DISPLAY = "hidden";
            }
        }
    };
  
    this.updateView = function() {
        var obj = this.getObject();
              
        if (this.m_bEnabled) {
            if (obj == null) {
                var strInnerHTML = "";
              
                obj = document.createElement("div");
                obj.id = this.getID();
              
                if (this.m_bFullShow) {
                    obj.style.cssText = "position:absolute; display:block; " +
                                        "z-index:999; top:0px; left:0px; " +
                                        "width:100%; height:100%; " +
                                        "font-size:12px; overflow:auto; " +
                                        "border-right: 8px solid #333333; " +
                                        "opacity:0.7; filter:alpha(opacity=70); color:white; background:black";
                }
                else {
                    obj.style.cssText = "position:absolute; display:block; " +
                                        "z-index:999; top:0px; left:0px; " +
                                        "width:8px; height:100%; " +
                                        "font-size:12px; overflow:auto; " +
                                        "border-right: 8px solid #333333; " +
                                        "opacity:0.7; filter:alpha(opacity=70); color:white; background:black";
                }
              
                strInnerHTML += "<div style=/"display:block;/" id=/"" + this.getContentID() + "/" ></div>";
              
                obj.innerHTML = strInnerHTML;
              
                obj.onclick = function() { JSLogger.getInstance().switchView(); };
              
                document.body.appendChild(obj);
            }
        }
        else {
            if (obj) {
                obj.style.display = "none";
            }
        }
    };
  
    this.update = function() {
        var obj = this.getObject();
        if (obj) {
            var strInnerHTML = "";

            strInnerHTML += "<div style=/"display:block;/" id=/"" + this.getContentID() + "/" ></div>";
          
            if (this.m_bOverflowed) {
                for (var i = this.m_nBeginLine-1; i>=0; i--) {
                    strInnerHTML += "<a>" + this.m_msgLines[i] + "</a></br>/r/n";
                }

                for (var i = this.m_nMaxLine-1; i>=this.m_nBeginLine; i--) {
                    strInnerHTML += "<a>" + this.m_msgLines[i] + "</a></br>/r/n";
                }
            }
            else {
                for (var i = this.m_nEndLine; i>=this.m_nBeginLine; i--) {
                    strInnerHTML += "<a>" + this.m_msgLines[i] + "</a></br>/r/n";
                }
            }
              
            obj.innerHTML = strInnerHTML;
        }
    };

    this.getID = function() {
        return "JSLogger_Instance";
    };
  
    this.getContentID = function() {
        return "JSLogger_Instance_Content";
    };

    this.getObject = function() {
        return document.getElementById(this.getID());
    };

    this.getContentObject = function() {
        return document.getElementById(this.getContentID());
    };
  
    this.send = function(messages) {
        this.m_nEndLine++;
        if (this.m_nEndLine >= this.m_nMaxLine) {
            this.m_nEndLine = 0;
            this.m_bOverflowed = true;
        }

      
        if (this.m_bOverflowed) {
            this.m_nBeginLine++;
            if (this.m_nBeginLine >= this.m_nMaxLine) {
                this.m_nBeginLine = 0;
            }
        }

        this.m_msgLines[this.m_nEndLine] = (new Date()).toUTCString() + ": " + messages[0];
    };
};

JSLogger.instance = null;
  
JSLogger.getInstance = function() {
    if (JSLogger.instance == null) {
        JSLogger.instance = new JSLogger();
        setTimeout("JSLogger.onTimer()", 1000);
    }
  
    return JSLogger.instance;
};

JSLogger.enable = function() {
    var logger = JSLogger.getInstance();
  
    if (logger) {
        logger.enable(arguments);
    }
};

JSLogger.debug = function() {
    var logger = JSLogger.getInstance();
  
    if (logger.isEnabled()) {
        logger.send(arguments);
    }
};

JSLogger.onTimer = function() {

    var logger = JSLogger.getInstance();
    if (logger.isEnabled()) {
        logger.update();
    }

    setTimeout("JSLogger.onTimer()", 1000);
};