日志
创意脚本,简单实用的-javascript-log
//----------------------------------开发背景----------------------------------------------//
在javascript开发过程中，如果总是使用alert的方式调试程序,很难满足企业级开发的需要。
比如ajax项目中，存在一个3000行左右JS文件，其中存在各种自定义的javascript对象。
开发的过程中，总是需要在js程序执行到某个关键点的时候，监视自定义对象的值或状态，
判断执行结果是否是预期的样子.
alert的方式存在以下两个明显的缺点：
1.假如一次执行中有n个关键点的值都想随时监视，使用alert您就不的不点够n次确认，
- 给开发者的感觉是很不连贯也不直观，很难流畅发现隐藏很深的问题。
2.用于调试的alert语句，在发布的时候必须删除掉，等有朝一日需要再次调试的时候，
- 您就不得不回忆之前的关键点，分别加上alert，艰难的调试。
鉴于以上需求,本着简单实用的原则,自己动手编写了这个javascript调试工具，全部程序只有10kb左右。
使用该工具之后，以上两个问题，变得迎刃而解。您或许会发现,IE下调试javascript程序变的便利。
该工具主要有以下特点：
1.完全的可插入式思想，对目标程序没有任何负作用。
2.使用方法简单,方便，只需要引入一行JS代码。
//----------------------------------使用方法---------------------------------------------//
步骤1.将类似于下面这样的一行script标签加入到您的目标页面(JSP,ASP,HTML,PHP等)中
<SCRIPT language=javascript src="debugInner.js"></script>
关于script标签参数的说明:
/**
-------------------------------------------
[String]@param -- url
-------------------------------------------
将url指向的网页的body.innerHTML加入到targetpage div中
[初始化时]时可以设定
例:
url="http://www.baidu.com"
url="http://www.126.com"
url="http://www.sina.com.cn"
...
-------------------------------------------
[Boolean]@param -- debug
-------------------------------------------
用来控制是否开启javascript的log功能
[初始化时]时可以设定
例:
debug = true (DEFAULT)
debug = false
-------------------------------------------
[Boolean]@param -- showtime
-------------------------------------------
用来控制是否在每条log信息前显示当前时间
[初始化]或[运行时]均可以设定
例:
showtime = false (DEFAULT)
showtime = true
-------------------------------------------
[String]@param -- local
-------------------------------------------
设置界面的语言
[初始化]或[运行时]均可以设定
例:
local = "CN"
local = "EN" (DEFAULT)
-------------------------------------------
[String]@param -- src
-------------------------------------------
设置debugInner.js的路径
[初始化]时可以设定
例:
src = "D:/jslog/debugInner.js"
src = "../javascriptlog-tool/debugInner.js"
src = "http://localhost:8080/myproject/debugInner.js"
...
--------------------------------------------------
*/
步骤2.测试代码如下：
<!--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"加入到目标程序中的script标签删除,您也可以
选择在您的程序中重构一个类似于下面的方法,名字随意.比如：
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 即可.
//----------------------------------最新下载---------------------------------------//
下载: http://public.box.net/jzshmyt
//----------------------------------更新履历---------------------------------------//
附加说明:
1.jslog中,对的内部事件进行统一管理.
-内测阶段,留了一个测试"取消事件注册"的接口－通过双击console 可以调用
2.console上方链接的说明:
- [移动控制台]:可以移动控制台或改变控制台的宽度
- [增大高度]/[减小高度]:可以根据需要调整控制台的高度
- MaxHeight:屏幕高度,MinHeight:100px
- [清除信息]:清除控制台中的信息
- [显示/隐藏时刻]:可以在运行时设定是否显示输出log时的时刻
3.document的onscroll事件发生时,只有在console不在可见范围内时才响应.
4.快捷键[ctrl+shift+s],再console中显示当前活动元素的HTML代码
5.该工具所有功能只在IE下测试通过.
2008/02/14更新:
1.加入性能测试组件,支持嵌套调用,可参照example.htm中的应用
_logT.begin();//测试开始
_logT.end(msg);//测试结束
2.代码重构,处理重复加载相关的问题.
