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 eval和JSON之间的联系
Dec 31 Javascript
JS常见问题整理(持续更新)
Aug 06 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
May 03 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
微信小程序实现分享商品海报功能
Sep 30 Javascript
ES6新增的数组知识实例小结
May 23 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实现过滤UBB代码的类
2015/03/12 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
如何在PHP中生成随机数
2020/06/04 PHP
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
Python实现二叉堆
2016/02/03 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
基于Python os模块常用命令介绍
2017/11/03 Python
Python随机函数random()使用方法小结
2018/04/29 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
python实现图片中文字分割效果
2019/07/22 Python
python可迭代对象去重实例
2020/05/15 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
高一政治教学反思
2014/01/28 职场文书
投标服务承诺书
2014/05/28 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
python 离散点图画法的实现
2022/04/01 Python