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 相关文章推荐
jQuery ajax cache缓存问题
Jul 01 Javascript
jquery常用技巧及常用方法列表集合
Apr 06 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
javascript相等运算符与等同运算符详细介绍
Nov 09 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
ReactNative中使用Redux架构总结
Dec 15 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
May 13 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
element中table高度自适应的实现
Oct 21 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
python如何实现int函数的方法示例
2018/02/19 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
python字典排序的方法
2019/10/12 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
手术室护士自我鉴定
2013/10/14 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
运动会稿件100字
2014/09/24 职场文书
大学生个人总结范文
2015/02/15 职场文书
python实现简单区块链结构
2021/04/25 Python
在Django中使用MQTT的方法
2021/05/10 Python
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL