快捷導(dǎo)航

web前端開(kāi)發(fā)也需要日志

更新時(shí)間：2010年12月09日 18:43:33 作者：

web前端開(kāi)發(fā)過(guò)程中調(diào)試是一個(gè)不可避免的過(guò)程，我們有眾多的瀏覽器可供選擇，但是如果您要調(diào)試的平臺(tái)瀏覽器不是那么先進(jìn)呢

如IE6,在他上面還不那么富饒，給程序調(diào)試帶來(lái)的很大的痛苦啊，所以日志即時(shí)輸出是一個(gè)不錯(cuò)的選擇，可以知道程序覆蓋到了哪里。即是在先進(jìn)的瀏覽器上也是很有必要的，他比去調(diào)試程序來(lái)確定相應(yīng)的業(yè)務(wù)代碼有沒(méi)有執(zhí)行到也快的多也容易的多，好了，下面來(lái)給大家介紹一個(gè)我業(yè)余時(shí)間寫的調(diào)試信息輸出工具。
上代碼：

復(fù)制代碼代碼如下:

 
(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;'>調(diào)試信息控制臺(tái)</span><span id='console_andler' style='float:right;margin-right:20px;cursor:pointer' title='展開(kāi)/折疊'>+</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; 
} 
} 
}); 
})(); 