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 相关文章推荐
javascript new 需不需要继续使用
Jul 02 Javascript
JS读取cookies信息(记录用户名)
Jan 10 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 Javascript
浅谈javascript的分号的使用
May 12 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
原生JavaScript实现随机点名表
Jan 14 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
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
jQuery 使用手册(六)
2009/09/23 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
Python随机函数random()使用方法小结
2018/04/29 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
门卫岗位安全职责
2013/12/13 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
食品工程专业求职信
2014/06/15 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
安全主题班会教案
2015/08/12 职场文书
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android