20071223更新创意无限,简单实用(javascript log)

在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-->
<SCRIPTlanguage=javascriptdebug=falseshowtime=falsesrc=../JSDebugTool/debugInner.file></script>
<!--debug功能开启、显示time、使用WEB路径引入debugInner.file-->
<SCRIPTlanguage=javascriptdebug=trueshowtime=truesrc=
<!--debug功能开启、不显示time、使用本地绝对路径引入debugInner.file-->
<SCRIPTlanguage=javascriptsrc=D:/tools/JSDebugTool/debugInner.file></script>
※注释:
debug=true/false
true:Javascriptdebug功能开启,默认值.(Development)
false:Javascriptdebug功能关闭.(Release)
不设定debug参数时,默认为true.
src属性可以设定为(绝对路径、相对路径、WEB路径等)
debugInner.file:采用嵌入模式模式
showtime=true/false
true:在每条debug信息前显示当前时间。
false:不显示当前时间,只显示debug信息。
不设定showtime参数时,默认为false.
url属性可以为目标页面的url，比如http：//
-当设置了url参数时,将url指向的网页的innerHTML加入到targetpagediv中


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

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

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

下载(2007/12/23更新):

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

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