web前端开发也需要日志
web前端开发也需要日志
发布时间:2016-12-30 来源:查字典编辑
摘要:如IE6,在他上面还不那么富饶,给程序调试带来的很大的痛苦啊,所以日志即时输出是一个不错的选择,可以知道程序覆盖到了哪里。即是在先进的浏览器...

如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><table><tbody><tr><td><code>{1}</code></td><td><b>[{3}]:</b>{4}</td></tr></tbody></table></div>',

bgColor,this.__debugLine,"#333333",flag,msg):msg;

if(flag.constructor!=String)

msg = String.format('<div><table><tbody><tr><td><code>{1}</code></td><td><b>[{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>调试信息控制台</span><span id='console_andler' title='展开/折叠'>+</span><br>";

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'/>";

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作者一个单元测试模块。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类