Although not a very complex implementation, but each time it would be cumbersome, so I wrote a small script to automatically generate this output window.
Code
Copy Code code 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 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 = "contraction";
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 = "Close";
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 = "unfold";
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 = "contraction";
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 = "";
}
Calling the method is simple:
Copy Code code 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 appears automatically in the lower-right corner of the window and the corresponding content is displayed. See below for effect drawing:
