为调试JavaScript添加输出窗口

 

调试 JavaScript 是一件很麻烦的事，尽管有很多很好用的调试工具，但有时候想要跟踪值的变化，但即不想中断脚本执行，也不想用 alert 显示值信息，这种情况下，一般的做法是在页面上添加一个 DIV 或者其它元素，然后再往里面添加调试信息。虽然不是很复杂的实现，但每次都要这样就会很麻烦，所以我写了一小段脚本，用来自动生成这个输出窗口。

 

代码

window.Babu = {};

Babu.Debugging = {};

Babu.Debugging.writeLine =  function (format, arg1, arg2) {

     var  console = Babu.Debugging._getConsole();

     if  (console.get_visible()) {
         var  msg = format;

         if  ( typeof  msg !== "undefined" && msg !==  null ) {
             var  index;
             if  ( typeof  msg === "string") {
                 var  array = format.match(/\{(\d+)\}/g);
                 if  (array) {
                     for  ( var  i = 0; i < array.length; i++) {
                        index = array[i];
                        index = parseInt(index.substr(1, index.length - 2)) + 1;
                        msg = msg.replace(array[i], arguments[index]);
                    }
                }
            }
        }

         var  span = document.createElement("SPAN");
        span.appendChild(document.createTextNode(msg));
        console._output.appendChild(span);
        console._output.appendChild(document.createElement("BR"));
        span.scrollIntoView();

         return  span;
    }
}

Babu.Debugging._getConsole =  function () {
     var  console = Babu.Debugging._console;

     if  (!console) {
         var  div = document.createElement("DIV");
        div.style.position = "fixed";
        div.style.right = "3px";
        div.style.bottom = "3px";
        div.style.width = "350px";
        div.style.height = "180px";
        div.style.backgroundColor = "white";
        div.style.color = "black";
        div.style.border = "solid 2px #afafaf";
        div.style.fontSize = "12px";

        document.body.appendChild(div);

        Babu.Debugging._console = console = div;

        div = document.createElement("DIV");
        div.style.backgroundColor = "#e0e0e0";
        div.style.position = "absolute";
        div.style.left = "0px";
        div.style.right = "0px";
        div.style.top = "0px";
        div.style.height = "16px";
        div.style.padding = "2px 2px";
        div.style.margin = "0px";
        console.appendChild(div);
        console._toolbar = div;

        div = document.createElement("DIV");
        div.style.overflow = "auto";
        div.style.whiteSpace = "nowrap";
        div.style.position = "absolute";
        div.style.left = "0px";
        div.style.right = "0px";
        div.style.top = "20px";
        div.style.bottom = "0px";
        div.style.height = "auto";
        console.appendChild(div);
        console._output = div;

         var  btn;

        btn = document.createElement("SPAN");
        btn.innerHTML = " 收缩 ";
        btn.style.margin = "0px 3px";
        btn.style.cursor = "pointer";
        console._toolbar.appendChild(btn);
        btn.onclick =  function () {  if  (console.get_collapsed()) console.expand();  else  console.collapse(); }

        btn = document.createElement("SPAN");
        btn.innerHTML = " 清除 ";
        btn.style.margin = "0px 3px";
        btn.style.cursor = "pointer";
        console._toolbar.appendChild(btn);
        btn.onclick = Babu.Debugging.clearConsole;

        btn = document.createElement("SPAN");
        btn.innerHTML = " 关闭 ";
        btn.style.cursor = "pointer";
        btn.style.margin = "0px 3px";
        console._toolbar.appendChild(btn);
        btn.onclick =  function () { Babu.Debugging.hideConsole(); }

        console.get_visible =  function () {  return  this .style.display !== "none" };
        console.get_collapsed =  function () {  return  !(! this ._collapseState) };

        console.collapse =  function () {
             if  (! this .get_collapsed()) {
                 this ._output.style.display = "none";
                 this ._toolbar.childNodes[1].style.display = "none";
                 this ._toolbar.childNodes[2].style.display = "none";
                 this ._toolbar.childNodes[0].innerHTML = " 展开 ";
                 this ._collapseState = { width:  this .style.width, height:  this .style.height }
                 this .style.width = "30px";
                 this .style.height = "16px";
            }
        }

        console.expand =  function () {
             if  ( this .get_collapsed()) {
                 this ._output.style.display = "";
                 this ._toolbar.childNodes[1].style.display = "";
                 this ._toolbar.childNodes[2].style.display = "";
                 this ._toolbar.childNodes[0].innerHTML = " 收缩 ";
                 this .style.width =  this ._collapseState.width;
                 this .style.height =  this ._collapseState.height;
                 this ._collapseState =  null ;

            }
        }
    }

     return  console;
}

Babu.Debugging.showConsole =  function () {
    Babu.Debugging._getConsole().style.display = "";
}

Babu.Debugging.hideConsole =  function () {
     var  console = Babu.Debugging._console;

     if  (console) {
        console.style.display = "none";
    }
}

Babu.Debugging.clearConsole =  function () {
     var  console = Babu.Debugging._console;
     if  (console) console._output.innerHTML = "";
}

 

调用方法很简单：

Babu.Debugging.writeLine(" 调试信息 ");

Babu.Debugging.writeLine(" 带参数的调试信息：参数 1={0} ，参数 2={1}", arg1, arg2);

调用之后，会自动在窗口的右下角出现一个固定位置的窗口，并显示相应的内容。效果图请看下面：

最后补充一点，因为 IE6 不支持 position: fixed ，因此显示的时候会乱七八糟。

 

 

摘自博客园：http://www.cnblogs.com/effun/archive/2010/02/05/jsdebugging.html