web前端开发也需要日志
2010-12-09 00:00
507 查看
如IE6,在他上面还不那么富饶,给程序调试带来的很大的痛苦啊,所以日志即时输出是一个不错的选择,可以知道程序覆盖到了哪里。即是在先进的浏览器上也是很有必要的,他比去调试程序来确定相应的业务代码有没有执行到也快的多也容易的多,好了,下面来给大家介绍一个我业余时间写的调试信息输出工具。
上代码:
上面代码调用也相当的简单
页面中就会出相应的日志。
该日志输出部分代码取自Jquery作者一个单元测试模块。
上代码:
(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作者一个单元测试模块。
相关文章推荐
- web前端开发也需要日志
- web前端开发也需要日志
- Web前端开发最佳实践(12):JavaScript代码中有大量写死的配置数据?这些数据难以维护,你需要合理组织这些数据
- web前端开发需要用到的软件及相应配置集锦
- Web前端开发工程师需要掌握哪些核心技能?
- 网站开发进阶(三十八)Web前端开发规范文档你需要知道的事
- 2018年不想被web前端开发淘汰,你需要掌握哪些技术?
- 【前端】Vue和Vux开发WebApp日志一、整合vue+cordova和webpack+gulp
- web前端开发需要学习什么内容已经需要使用什么开发工具?
- 网站开发进阶(三十八)Web前端开发规范文档你需要知道的事
- 如果要学习web前端开发,需要学习什么?
- 学习web前端开发需要怎么学?
- Web前端开发最佳实践(9):CSS代码太太乱,重复代码太多?你需要精简CSS代码
- Web前端开发规范文档你需要知道的事
- web前端开发工程师需要学习的东西
- C#实现多级子目录Zip压缩解压实例 NET4.6下的UTC时间转换 [译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了 asp.Net Core免费开源分布式异常日志收集框架Exceptionless安装配置以及简单使用图文教程 asp.net core异步进行新增操作并且需要判断某些字段是否重复的三种解决方案 .NET Core开发日志
- web开发-前端设计学习日志
- Web前端开发规范文档你需要知道的事(转自www.jqueryba.com)
- 如果要学习web前端开发,需要学习什么?
- web前端开发需要哪些工具和需要学习什么?