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 相关文章推荐
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 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
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
php创建无限级树型菜单
2015/11/05 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
jQuery功能函数详解
2015/02/01 Javascript
javascript定时器完整实例
2015/02/10 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
Angular 作用域scope的具体使用
2017/12/11 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
python使用Berkeley DB数据库实例
2014/09/26 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
高中英语演讲稿范文
2014/04/24 职场文书
文明村镇申报材料
2014/05/06 职场文书
经济管理专业求职信
2014/06/09 职场文书
高考学习决心书
2015/02/04 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
导游词之襄阳古城
2019/09/27 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python