Web front-end development also requires log _javascript skills

such as IE6, in him is not so rich, to the program debugging brought great pain ah, so the log output is a good choice, you can know where the program coverage. That is, in the advanced browser is also very necessary, he is more than to debug the program to determine whether the corresponding business code has been implemented to also faster and more easily, well, here to introduce a spare time I write debugging information output tool.
Code on:

Copy Code code as follows:

(function () {
var cache = [];
var el = null;
This.__debugline = 1;
function Parseobjtostr (obj) {
if (Obj.constructor = = String) {
return obj.tostring ();
}
var ret = [];
for (var o in obj) {
if (typeof obj[o]!= "function")
Ret.push (o+ ":" +obj[o]);
}
Return Ret.join (",");
}
This.assert = function (flag,msg) {
msg = {"Number": 1, "string": 1, "boolean": 1, "function": 1, "undefined": 1}[typeof msg]?msg:parseobjtostr (msg);
Log.getinstance (). Debug (msg);
Return
var bgcolor = this.__debugline%2==0? " Background-color: #F8F8F8 ":" Background-color: #ffffff ";
msg = flag== "Debug"? String.Format (' <div style= ' {0} ' ><table style= ' font-size:12px;border-collapse:collapse!important; " &GT;&LT;TBODY&GT;&LT;TR&GT;&LT;TD style= "height:25px;line-height:25px;border-right:3px solid #6CE26C; width:45px; Text-align:center; " ><code style= "Font-weight:bold;color:gray" >{1}</code></td><td><b style= "color:{2}; margin-left:5px; " >[{3}]:</b>{4}</td></tr></tbody></table></div> ',
Bgcolor,this.__debugline, "#333333", flag,msg): msg;
if (flag.constructor!=string)
msg = String.Format (' <div style= ' {0} ' ><table style= ' font-size:12px;; Border-collapse:collapse!important;line-height:25px; " &GT;&LT;TBODY&GT;&LT;TR&GT;&LT;TD style= "height:25px;line-height:25px;border-right:3px solid #6CE26C; width:45px; Text-align:center; " ><code style= "Font-weight:bold;color:gray" >{1}</code></td><td><b style= "color:{2}; margin-left:5px; " >[{3}]:</b>{4}</td></tr></tbody></table></div> ',
Bgcolor,this.__debugline,flag? " Green ":" Red ", Flag?" Pass ":" FAIL ", msg);
this.__debugline++;
if (cache!=null) {
Cache[cache.length] = msg;
}
else{
El.innerhtml + msg;
}
}
function ApplyStyle (el,style) {
For (Var pro in style) {
El.style[pro] = Style[pro];
}
}
addevent (window, "Load", function () {
Return
el = document.createelement ("div");
var elstyle ={backgroundcolor: "#ffffff", Color: "#333333", border: "1px solid #dcdada", borderleft: "0px solid #6CE26C", BorderRight: "0px solid #6CE26C"
, Lineheight: "25px", TextAlign: "Left", listStyleType: "None", margin: "0px", MaxHeight: "200px", Overflow: "Auto"};
var head = document.createelement ("div");
var headstyle ={backgroundcolor: "#fef5c5", Lineheight: "25px"};
head.innerhtml = "<span style= ' float:left;font-weight:bold;margin-left:10px;font-size:13px; ' > Debugging Information Console </span><span id= ' console_andler ' style= ' float:right;margin-right:20px;cursor:pointer ' title= ' Expand/Fold ' >+</span><br style= ' clear:both ' > ';
var wrap = document.createelement ("div");
var wrapstyle ={overflow: "Hidden", BackgroundColor: "#ffffff", Color: "#333333", border: "1px solid #C0C0C0", "FontSize": "12px", "margin": "5px", Position: "Fixed", left: "0px", Bottom: "0px", Width: "97%"};
var foot = document.createelement ("div");
var footstyle ={padding: "0", TextAlign: "Left"};
foot.innerhtml = ">>><input type = ' text ' value= ' id= ' console_eval ' style= '" Margin:0;width:90%;border:none ; line-height:25px;height:25px;text-indent:10px; ' /> ";
ApplyStyle (Wrap,wrapstyle);
ApplyStyle (Head,headstyle);
ApplyStyle (El,elstyle);
ApplyStyle (Foot,footstyle);
Wrap.appendchild (head);
Wrap.appendchild (EL);
Wrap.appendchild (foot);
Document.body.appendChild (wrap);
el.innerhtml = Cache.join ("");
cache = NULL;
function Toggle () {
if (!this.hide) {
El.style.display = "None";
Foot.style.display = "None";
Wrap.style.width = "200px";
This.hide = true;
}
else{
El.style.display = "";
Foot.style.display = "";
Wrap.style.width = "98%";
This.hide = false;
}
}
Head.onclick = function () {
Toggle.call (this);
}
Head.onclick ();
document.getElementById ("Console_eval"). onkeydown = function (e) {
E = e| | window.event;
if (e.keycode==13) {
try{
Eval.call (Window,string.format ("Assert (' Debug ', {0})", This.value));
}
catch (e) {
ASSERT ("Debug", E.message);
}
El.scrolltop = El.scrollheight;
}
}
});
})();

The code call above is also fairly simple

Copy Code code as follows:

ASSERT ("Debug", "Debugging Information");

The corresponding log appears on the page.
The log output portion of the code is taken from a unit test module of the jquery author.