写了一个打印信息的函数比Alert强大，类似Firebug中的console.table

有时候，特别是在Ajax请求返回数据时我们需要知道返回数据的结构，如果是Object，使用Alert是打印不出来的，使用Firebug中的 console 可以查看，我自己写了一个函数，有点像这个，有时候觉得使用console还不够直观，所以自己想办法写一个，不过现在支持的层级就三层，多了就不行了， 多了就出现object。

if(!window.debug){  
    window.debug = {};//选择一个自己的命名，千万别跟别人的冲突  
};  
debug.info = function(obj){  
    if (typeof _deBugStatus_ !== "undefined") {  
        return;  
    };  
    var version = "1.0",str = "",type,oLen = 0,ml=0,subStr = "",oimStr = "",aArr = "";  
  
    var st=document.createElement("style");  
    st.innerHTML = '' +  
                   '.layer{font-family:Arial; font-size:14px; color:#333; line-height:150%; 100%; height:100%; background:rgba(0,0,0,0.5); position:absolute; left:0; top:0; z-index:9999}' +  
                   '.debug-box{900px; position:relative; left:50%; top:50%; margin-left:-450px; margin-top:-250px; background:white; box-shadow:0 0 50px rgba(0,0,0,0.5);}' +  
                   '.debug-title{line-height:35px; padding: 0 10px; border-bottom:1px solid #AE0; background:#DED}' +  
                   '.debug-names{20%; float:left; display:inline-block; *display:inline; *zoom:1; color:green; text-indent:5px}' +  
                   '.debug-values{70%; float:right; color:orange}' +  
                   '.debug-close{line-height:35px; position:absolute; right:0; top:0; color:#666; padding:0 10px; cursor:pointer}' +  
                   '.uls{padding:0; margin:30px}' +  
                   '.debug-clear{clear:both; line-height:0; height:0;}' +  
                   '.debug-line{5%; float:left; color:blue}' +  
                   '.debug-cs{overflow-y:auto; height:500px; padding-bottom:10px}' +  
                   '#debugLayer li{border-bottom:1px solid #EEE;list-style:none; line-height:30px;}' +  
                   '#debugLayer li:hover{background:#EDF4ED}' +  
                   '.debug-obj-info{color:#666;}' +  
                   '.debug-obj{font-weight:bold; color:green; margin:10px}';  
  
  
  
    var h = document.getElementsByTagName("head")[0];  
    h.appendChild(st);  
  
    if (typeof obj === "string") {  
        str = obj;  
        type = "String";  
    } else if (typeof obj === "object") {  
        if (obj instanceof Array) {  
            for (var i = 0, len = obj.length; i < len; i++) {  
                str += '<li><div class="debug-names">'+ i +'</div><div class="debug-line">=></div><div class="debug-values">' + obj[i] + '</div><div class="debug-clear"></div></li>';  
            }  
            type = "Array";  
            oLen = len;  
        } else {  
            for (var i in obj) {  
                if (typeof obj[i] == "object") {  
                    if (obj[i]instanceof Array) {  
                        for (var m = 0; m < obj[i].length; m++) {  
                            if (typeof obj[i] == "object") {  
                                if (obj[i]instanceof Array) {  
                                    var _a = "";  
                                    for (var k = 0; k < obj[i].length; k++) {  
                                        _a += '<div class="debug-names">' + k + '</div><div class="debug-line">=></div><div class="debug-values">' + obj[i][k] + '</div><div class="debug-clear"></div>';  
                                    }  
                                    aArr += '<div class="debug-names">' + m + '</div><div class="debug-line">=></div><div class="debug-values">' + _a + '</div><div class="debug-clear"></div>';  
                                } else {  
                                    var _b = "";  
                                    for (var n in obj[i]) {  
                                        _b += '<div class="debug-names">' + n + '</div><div class="debug-line">=></div><div class="debug-values">' + obj[i][n] + '</div><div class="debug-clear"></div>';  
                                    }  
                                    aArr += '<div class="debug-names">' + m + '</div><div class="debug-line">=></div><div class="debug-values">' + _b + '</div>';  
                                }  
                            } else {  
                                aArr += '<div class="debug-names">' + m + '</div><div class="debug-line">=></div><div class="debug-values">' + obj[i][m] + '</div><div class="debug-clear"></div>';  
                            }  
                        }  
                        subStr += aArr;  
                        str += '<li><div class="debug-names">' + i + '</div><div class="debug-line">=></div><div class="debug-values">' + subStr + '</div><div class="debug-clear"></div></li>';  
                    } else {  
                        for (var m in obj[i]) {  
                            if (typeof obj[i][m] == "object") {  
                                if (obj[i][m]instanceof Array) {  
                                    for (var j = 0; j < obj[i][m].length; j++) {  
                                        oimStr += '<div class="debug-names">' + j + '</div>' + '<div class="debug-line">=></div>' + '<div class="debug-values">' + obj[i][m][j] + '</div><div class="debug-clear"></div>';  
                                    }  
                                    subStr = oimStr;  
                                } else {  
                                    for (var j in obj[i][m]) {  
                                        oimStr += '<div class="debug-names">' + j + '</div>' + '<div class="debug-line">=></div>' + '<div class="debug-values">' + obj[i][m][j] + '</div><div class="debug-clear"></div>';  
                                    }  
                                    subStr = oimStr;  
                                }  
                            } else {  
                                subStr += '<div class="debug-names">' + m + '</div>' + '<div class="debug-line">=></div>' + '<div class="debug-values">' + obj[i][m] + '</div><div class="debug-clear"></div>';  
                            }  
                        }  
                        str += '<li><div class="debug-names">' + i + '</div><div class="debug-line">=></div><div class="debug-values">' + subStr + '</div><div class="debug-clear"></div></li>';  
                    }  
                } else {  
                    str += '<li><div class="debug-names">' + i + '</div><div class="debug-line">=></div><div class="debug-values">' + obj[i] + '</div><div class="debug-clear"></div></li>';  
                }  
                ml++;  
            }  
            type = "Object";  
            oLen = ml;  
        }  
    } else if (obj instanceof Function) {  
        str = obj;  
        type = "Function";  
    }  
    result = '<ul class="uls"><li class="debug-obj-info">This is a <span class="debug-obj">'+type+'</span>info  lenght:'+oLen+'</li>' + str + '</ul>';  
    var layer = document.createElement("div");  
    var box = document.createElement("div");  
    var title = document.createElement("div");  
    var content = document.createElement("div");  
    layer.setAttribute("class","layer");  
    layer.setAttribute("id", "debugLayer");  
    box.setAttribute("class","debug-box");  
    box.setAttribute("id", "debugBox");  
    title.setAttribute("id", "debugTitle");  
    title.setAttribute("class","debug-title");  
    layer.appendChild(box);  
    content.setAttribute("id", "debugContent");  
    content.setAttribute("class","debug-cs");  
    box.appendChild(title);  
    box.appendChild(content);  
    title.innerHTML = 'Debug Tools ' + version + '<span id="deBugClose" class="debug-close" title="Close Debug">close</span>';  
    content.innerHTML = result;  
    document.body.appendChild(layer);  
    document.getElementById("deBugClose").onclick = function () {  
        document.body.removeChild(layer);  
    }  
    layer.onclick = function(e){  
        if(document.all){  
            window.event.cancelBubble = true;  
        }else{  
            e.stopPropagation();  
        }  
    }  
      
    return _deBugStatus_ = 0;  
} 

 在body里面添加一个层，然后把信息输出来，很直观，个人觉得也很方便，自己经常使用。

    //测试一下效果  
    debug.info(navigator);  
      
    //嘿嘿，是不是很酷