2007/12/23更新创意无限,简单实用(javascript log)

韩欣怡77

韩欣怡77

2016-02-19 08:55

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的2007/12/23更新创意无限,简单实用(javascript log)教程,一起来看看吧!超容易上手~
在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等)中,下面的写法都是支持的.
!-- 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
展开更多 50%)
分享

猜你喜欢

2007/12/23更新创意无限,简单实用(javascript log)

Web开发
2007/12/23更新创意无限,简单实用(javascript log)

GoodNites最新创意广告欣赏

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
GoodNites最新创意广告欣赏

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

国外最新创意广告欣赏

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
国外最新创意广告欣赏

妈妈新创意 爪印小饼干

孕妇食谱
妈妈新创意 爪印小饼干

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

最新创意国外茶叶包装

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
最新创意国外茶叶包装

标志汽车最新创意广告欣赏

平面设计 海报设计 海报设计素材 广告设计 平面设计素材
标志汽车最新创意广告欣赏

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

java 使用线程做的一个简单的ATM存取款实例代码

java 使用线程做的一个简单的ATM存取款实例代码

创建一个复制UBB软件信息的链接或按钮的js代码

创建一个复制UBB软件信息的链接或按钮的js代码
下拉加载更多内容 ↓