博客园的第一篇 js debug 帮助类

自己写了一个js帮助类，主要用于调试js。做项目有时候调试很麻烦，不能总alter('***'); 如果是个循环那就更郁闷了！

var console = {
    $: function(id) {
        return typeof id == 'string' ? document.getElementById(id) : id;
    },
    state: "ready",
    show: true,
    rowIndex: 1,
    init: function() {
        var handle = this.$("console-win");
        var panel = this.$("console-panel");
        if (handle == null) {
            var box = document.createElement("div");
            box.id = "console-win";
            with (box.style) {
                width = '320px';
                position = 'fixed';
                fontSize = '15px';
                zIndex = 10000;
                top = '200px';
            }
            var css = 'color:#000000;font-size:12px;float:left;width:18px;border:solid 1px Gray;cursor:pointer;text-align:center;line-height:18px';
            var tab1 = '<div id="console-tabs-01" style="{css}" >调试窗口</div>';
            var tab2 = '<div id="console-tabs-02" style="margin-top:10px;{css}" >停止</div>';
            var tab3 = '<div id="console-tabs-03" style="margin-top:10px;{css}" >继续</div>';
            var tab4 = '<div id="console-tabs-04" style="margin-top:10px;{css}" >清屏</div>';
            var html = '<div id="console-panel" style="height:320px;background:#000;color:yellow;overflow-y:scroll;font-size:14px;float:left;width:300px;"></div>';
            html = html + tab1 + tab2 + tab3 + tab4;
            box.innerHTML = html.replace(/{css}/gi, css);
            document.body.appendChild(box);

            var ctab1 = this.$("console-tabs-01");
            panel = this.$("console-panel");

            var _this = this;
            ctab1.onclick = function() {
                if (_this.show) {
                    _this.show = false;
                    box.style.left = '-300px';
                } else {
                    _this.show = true;
                    box.style.left = '0px';
                }
            }
            this.$('console-tabs-02').onclick = function() { _this.state = 'stop'; }
            this.$('console-tabs-03').onclick = function() { _this.state = 'ready'; }
            this.$('console-tabs-04').onclick = function() { _this.$("console-panel").innerHTML = ""; _this.rowIndex = 1; }
        }
        return panel;
    },
    log: function(text) {
        if (this.state != "ready") return;
        var div = document.createElement("div");
        text = text
                    .replace(/class/gi, '<span style="color:#ff0000;">class</span>')
                    .replace(/function/gi, '<span style="color:#00ff00;">function</span>')
                    .replace(/var/gi, '<span style="color:#00bfff ;">var</span>');
        text = '<b style="color:#ffffff;">' + (this.rowIndex++) + '</b>&nbsp;&nbsp;' + text;
        div.innerHTML = text;
        var win = this.init();
        if (win.childNodes.length > 0)
            win.insertBefore(div, win.childNodes[0]);
        else
            win.appendChild(div);
    }
};

调用方法：console.log('x='+变量名或字符串);

第一次写博客，文笔比较懒，大家多担待！