2007/12/23更新创意无限,简单实用(javascript log)


Posted in Javascript onDecember 24, 2007

在javascript开发过程中,如果总是使用alert的方式调试程序,在某些简单的程序中是可行的. 
但是在通常的项目很复杂,这种方式已经很难满足,企业级开发的需要。 
比如ajax项目中,存在一个3000行左右JS文件,其中存在各种自定义的javascript对象。
开发的过程中,总是需要在js程序执行到某个关键点的时候,监视自定义对象的值或状态,
判断执行结果是否是预期的样子,如果您通过alert看到某些关联对象的值,是很困难的。
存在以下两个明显的缺点: 
1.假如一次执行中有n个关键点的值都想随时监视,使用alert您就不的不点够n次确认,给开发者的感觉是很不连贯也不直观,很难流畅发现隐藏很深的问题。 
2.用于调试的alert语句,在发布的时候必须删除掉,等有朝一日需要再次调试的时候,您就不得不回忆之前的关键点,分别加上alert,艰难的调试。 
使用该工具之后,以上两个问题,变得迎刃而解。 
鉴于以上需求,本人本着简单实用的原则, 
自己动手编写了这个javascript调试工具,全部程序只有300kb左右。 
该工具主要有以下特点: 
1.完全的可插入式思想,对目标程序没有任何负作用。 
2.使用方法简单,方便,只需要引入一行JS代码。 
使用后,您或许会发现,调试JS程序变的便利。 

//----------------------------------使用方法---------------------------------------------//
步骤1.将下载后JSDebugTool.zip,解压到任意目录,比如:D:\tools\JSDebugTool 
步骤2.将类似于下面这样的一行JS代码加入到您的目标程序(JSP,ASP,HTML,PHP等)中,下面的写法都是支持的.
<!-- debug功能不开启、不显示time、使用相对路径引入debugInner.file--> 
<SCRIPT language=javascript debug=false showtime=false src="../JSDebugTool/debugInner.file"></script> 
<!-- debug功能开启、显示time、使用WEB路径引入debugInner.file--> 
<SCRIPT language=javascript debug=true showtime=true src="http://localhost:8080/myproject/JSDebugTool/debugInner.file"></script> 
<!-- debug功能开启、不显示time、使用本地绝对路径引入debugInner.file--> 
<SCRIPT language=javascript src="D:/tools/JSDebugTool/debugInner.file"></script> 
※注释: 
debug=true/false 
    true : Javascript debug 功能开启,默认值.(Development) 
    false : Javascript debug 功能关闭.(Release) 
    不设定"debug"参数时,默认为true. 
src属性可以设定为(绝对路径、相对路径、WEB路径等) 
    debugInner.file : 采用嵌入模式模式 
showtime=true/false  
    true : 在每条debug信息前显示当前时间。 
    false : 不显示当前时间,只显示debug信息。 
    不设定"showtime"参数时,默认为false. 
url属性 可以为目标页面的url,比如http://www.baidu.com
  -当设置了url参数时,将url指向的网页的innerHTML加入到targetpage div中

步骤3.测试代码如下: 
<!--TEST begin--> 
<script> 
    function test(){ 
        var head = document.getElementsByTagName('HEAD').item(0); 
        jslog(null,"red");//null 
        jslog(1/3,"red");//number 
        jslog(1==2,"red");//boolean 
        jslog(test,"blue");//function 
        jslog("hello world!","red");//string 
        jslog(head);//object 
    } 
</script> 
<input type="button" value="TEST" > 
<!--TEST end-->
项目庞大的时候,需要总是在程序中保留一些调试信息,必要的时候进行调试。 
所以,能够让关键点的信息随时打印出来也是很重要的,同时保证在Release之后,对目标脚本执行性能没有任何影响是必须要考虑的问题。 
本工具提供的print接口是:jslog(msg,color);//msg:信息 color:信息的颜色
如果release的时候,你希望将"步骤2"加入到目标程序中的JS删除,也可以在您的程序中重构一个方法,名字随意.比如: 
function out(msg,color){ 
    if(jslog) jslog(msg,color); 

统一使用自己的定义的方法也可以,比如: 
function test(){ 
    out(null,"red");//null 
    out(1/3,"red");//number 
    out(1==2,"red");//boolean 
    out(test,"blue");//function 
    out("hello world!","red");//string 

不过通常来说Release的时候将debug开关设置为:debug=false,不需要删除目标程序中的调试代码,对目标JS程序执行性能无任何影响;需要再次调试时,只需要将debug开关设置为:debug=true 即可.

//----------------------------------最新下载---------------------------------------//

下载(2007/12/23 更新): http://www.box.net/shared/bc3s1hdkw0

//----------------------------------更新履历---------------------------------------//

2007/12/23 更新:(目前共15K)
1.对jslog中的内部事件进行统一管理.内测阶段,留了一个测试"取消事件注册"的接口-通过双击console 可以调用
2.debugInner页面布局调整,使debugInner中的console浮动、可拖动、可调整宽度.在console中top和left小于40的部位可拖。
说明: 希望能趋于简单,实用,不喜欢臃肿的。今后只更新debugInner,不再更新debugPopup

Javascript 相关文章推荐
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
vue-axios使用详解
May 10 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 Javascript
两个DIV等高的JS的实现代码
Dec 23 #Javascript
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 #Javascript
表单项的name命名为submit、reset引起的问题
Dec 22 #Javascript
mapper--图片热点区域高亮组件官方站点
Dec 22 #Javascript
使Ext的Template可以解析二层的json数据的方法
Dec 22 #Javascript
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 #Javascript
javascript支持firefox,ie7页面布局拖拽效果代码
Dec 20 #Javascript
You might like
摘自织梦CMS中的图片处理类
2015/08/08 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
Python三级目录展示的实现方法
2016/09/28 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
python实现超市扫码仪计费
2018/05/30 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
python+opencv实现阈值分割
2018/12/26 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
车间调度岗位职责
2013/11/30 职场文书
《母鸡》教学反思
2014/02/25 职场文书
投资合作协议书范本
2014/04/17 职场文书
应届毕业生自荐信
2014/05/28 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
行为习惯主题班会
2015/08/14 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL