web前端开发也需要日志

web前端开发过程中调试是一个不可避免的过程，我们有众多的浏览器可供选择，但是如果您要调试的平台浏览器不是那么先进呢，如IE6,在他上面还不那么富饶，给程序调试带来的很大的痛苦啊，所以日志即时输出是一个不错的选择，可以知道程序覆盖到了哪里。即是在先进的浏览器上也是很有必要的，他比去调试程序来确定相应的业务代码有没有执行到也快的多也容易的多，好了，下面来给大家介绍一个我业余时间写的调试信息输出工具。

上代码：

代码

( 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;"><tbody><tr><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;"><tbody><tr><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;'>调试信息控制台</span><span id='console_andler' style='float:right;margin-right:20px;cursor:pointer' title='展开/折叠'>+</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 = " &gt;&gt;&gt;<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;
}
}
});
})();

上面代码调用也相当的简单

assert( " debug " , " 调试信息 " );

页面中就会出相应的日志。

该日志输出部分代码取自Jquery作者一个单元测试模块。

转载于:https://www.cnblogs.com/275095923/archive/2010/12/04/1896374.html