2007/12/23更新创意无限,简单实用(javascript log)
2007/12/23更新创意无限,简单实用(javascript log)
发布时间:2016-12-30 来源:查字典编辑
摘要:在javascript开发过程中,如果总是使用alert的方式调试程序,在某些简单的程序中是可行的.但是在通常的项目很复杂,这种方式已经很难...

在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:toolsJSDebugTool

步骤2.将类似于下面这样的一行JS代码加入到您的目标程序(JSP,ASP,HTML,PHP等)中,下面的写法都是支持的.

<>

<SCRIPTlanguage=javascriptdebug=falseshowtime=falsesrc="../JSDebugTool/debugInner.file"></script>

<>

<SCRIPTlanguage=javascriptdebug=trueshowtime=truesrc="http://localhost:8080/myproject/JSDebugTool/debugInner.file"></script>

<>

<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://www.baidu.com

-当设置了url参数时,将url指向的网页的innerHTML加入到targetpagediv中

步骤3.测试代码如下:

<>

<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="button"value="TEST">

<>

项目庞大的时候,需要总是在程序中保留一些调试信息,必要的时候进行调试。

所以,能够让关键点的信息随时打印出来也是很重要的,同时保证在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更新):http://www.box.net/shared/bc3s1hdkw0

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

2007/12/23更新:(目前共15K)

1.对jslog中的内部事件进行统一管理.内测阶段,留了一个测试"取消事件注册"的接口-通过双击console可以调用

2.debugInner页面布局调整,使debugInner中的console浮动、可拖动、可调整宽度.在console中top和left小于40的部位可拖。

说明:希望能趋于简单,实用,不喜欢臃肿的。今后只更新debugInner,不再更新debugPopup

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类