web前端开发也需要日志


Posted in Javascript onDecember 09, 2010

如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 = ">>><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作者一个单元测试模块。
Javascript 相关文章推荐
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
js获取 type=radio 值的方法
May 09 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
Angular PWA使用的Demo示例
Jan 31 Javascript
JS实现点击掉落特效
Jan 29 Javascript
three.js如何实现3D动态文字效果
Mar 03 Javascript
JS拖动技术 关于setCapture使用
Dec 09 #Javascript
一起来写段JS drag拖动代码
Dec 09 #Javascript
教您去掉ie网页加载进度条的方法
Dec 09 #Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 #Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 #Javascript
来自国外的页面JavaScript文件优化
Dec 08 #Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 #Javascript
You might like
PHP4(windows版本)中的COM函数
2006/10/09 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
深入理解python中的atexit模块
2017/03/07 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
基于python实现计算两组数据P值
2020/07/10 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
大专生工程监理求职信
2013/10/04 职场文书
幼师自荐信
2013/10/26 职场文书
中国央视网签名寄语
2014/01/18 职场文书
企业年会主持词
2014/03/27 职场文书
不同意离婚上诉状
2015/05/23 职场文书
vue实现在data里引入相对路径
2022/06/05 Vue.js
Redis过期数据是否会被立马删除
2022/07/23 Redis
canvas 中如何实现物体的框选
2022/08/05 Javascript