Code _ JavaScript tips for adding an output window to debug javascript

Debugging JavaScript is a very troublesome task. Although there are many useful debugging tools, sometimes you want to track value changes, but you do not want to interrupt script execution, you do not want to use alert to display value information. In this case, you can add a DIV or other elements on the page and then add debugging information to it. Although the implementation is not very complex, it will be very troublesome every time. So I wrote a short script to automatically generate this output window.
Code

The Code is as follows:

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 p = document. createElement ("DIV ");
P. style. position = "fixed ";
P. style. right = "3px ";
P. style. bottom = "3px ";
P. style. width = "350px ";
P. style. height = "180px ";
P. style. backgroundColor = "white ";
P. style. color = "black ";
P. style. border = "solid 2px # afafaf ";
P. style. fontSize = "12px ";
Document. body. appendChild (p );
Babu. Debugging. _ console = p;
P = document. createElement ("DIV ");
P. style. backgroundColor = "# e0e0e0 ";
P. style. position = "absolute ";
P. style. left = "0px ";
P. style. right = "0px ";
P. style. top = "0px ";
P. style. height = "16px ";
P. style. padding = "2px 2px ";
P. style. margin = "0px ";
Console. appendChild (p );
Console. _ toolbar = p;
P = document. createElement ("DIV ");
P. style. overflow = "auto ";
P. style. whiteSpace = "nowrap ";
P. style. position = "absolute ";
P. style. left = "0px ";
P. style. right = "0px ";
P. style. top = "20px ";
P. style. bottom = "0px ";
P. style. height = "auto ";
Console. appendChild (p );
Console. _ output = p;
Var btn;
Btn = document. createElement ("SPAN ");
Btn. innerHTML = "shrink ";
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 = "clear ";
Btn. style. margin = "0px 3px ";
Btn. style. cursor = "pointer ";
Console. _ toolbar. appendChild (btn );
Btn. onclick = Babu. Debugging. clearConsole;
Btn = document. createElement ("SPAN ");
Btn. innerHTML = "disabled ";
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 = "Expand ";
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 = "shrink ";
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 = "";
}

The call method is simple:

The Code is as follows:

Babu. Debugging. writeLine ("Debugging information ");
Babu. Debugging. writeLine ("Debugging information with parameters: parameter 1 = {0}, parameter 2 = {1}", arg1, arg2 );

After the call, a fixed position window is automatically displayed in the lower right corner of the window and the corresponding content is displayed. See the following: