javascriptlog-tool
创意无限,简单实用(javascriptlog)
//------------开发背景------------//
在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 type="text/javascript" src="logger.js"></script>
关于script标签参数的说明:
<script type="text/javascript"
src="logger.js" //(必须)logger.js文件路径
enabled = true //(可选)是否启用log功能 是:true(默认)/否:false
lang = "cn" //(可选)界面初始语言 中文:cn(默认)/英文:en
time = false //(可选)时刻显示开关 显示:true/隐藏:false(默认)
contextmenu = false //(可选)右键开关 有效:true(默认)/无效:false
skin = false //(可选)右键菜单皮肤切换 支持切换:true/不支持切换:false(默认)
highlighter = false //(可选)代码高亮 使用:true(默认)/不使用:false
suspended = false //(可选)控制台悬浮开关 支持悬浮:true(默认)/不支持悬浮:false
cookie = false //(可选)是否支持cookie 支持:true(默认)/不支持:false
buffereffect = false//(可选)是否支持打开缓冲效果 支持:true/不支持:false(默认)
simplemode= false //(可选)是否以简易模式显示控制台 简易模式:true/标准模式:false(默认)
></script>
--------------------------------------------------
备注:
1.参数 enabled=false 时,
(1)其余参数均无效,
(2)控制台DIV、右键DIV不会被创建到当前document的body中.
(3)当前document中不会加载logger.css资源,
2.参数 highlighter=false 时,
当前document中不会加载Highlighter.js资源
3.参数 contextmenu = false 时,
右键DIV不会被创建到当前document的body中.
4.参数 cookie=false 时,
移动或调整大小后,控制台的位置和尺寸信息记录到cookie中,页面刷新后总是会回到默认位置、默认大小
5.参数 skin = false 时,
右键菜单的肤色总是使用logger.css中配置的颜色.
参数 skin = true 时,
右键菜单的肤色切换模式可以在运行是进行设定,包含随即肤色模式、锁定肤色模式.
6.参数 suspended=false时,
当控制台的浮动特征失效.
参数 suspended=true时,
当控制台不在可视范围内时，自动浮动到可操作视野内.
7.其余参数相对好理解,不进行详细说明.
步骤2.测试代码如下：
<!--TEST begin-->
<script>
function test(){
var head = document.getElementsByTagName('HEAD').item(0);
$Log.loginfo(null,"red");//null
$Log.loginfo(1/3,"red");//number
$Log.loginfo(1==2,"red");//boolean
$Log.loginfo(test,"blue");//function
$Log.loginfo("hello world!","red");//string
$Log.loginfo(head);//object
}
</script>
<input type="button" value="TEST" >
<!--TEST end-->
项目庞大的时候，需要总是在程序中保留一些调试信息，必要的时候进行调试。
所以，能够让关键点的信息随时打印出来也是很重要的，同时保证在Release之后，
对目标脚本执行性能没有任何影响是必须要考虑的问题。
本工具提供的print接口是：jslog(msg,color);//msg:信息 color:信息的颜色
如果release的时候,你希望将"步骤2"加入到目标程序中的script标签删除,您也可以
选择在您的程序中重构一个类似于下面的方法,名字随意.比如：
function $out(message,color){
$Log.loginfo(message,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程序执行性能无任何影响;(详细请参照《log工具参数测试.html》测试)
需要再次调试时,只需要将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代码
如下：
快捷键[ctrl+shift+s],将当前页面中活动元素的outerHTML输出到Console中
-- 比如鼠标点document后，执行[ctrl+shift+s]动作将输出: <body>...</body>
-- 比如焦点在input时，执行[ctrl+shift+s]动作将输出: <input type=...>
-- 比如鼠标点div后，执行[ctrl+shift+s]动作将输出: <div>...</div>
-- 比如鼠标点Console后，执行[ctrl+shift+s]动作将输出:debuglog工具中的 Console的HTML：
<DIV class=History id=__8630414529617247_ style="HEIGHT: 194px" align=left>...</DIV>
5.该工具所有功能只在IE下测试通过.
2008/02/14更新:
1.加入性能测试组件,支持嵌套调用,可参照example.htm中的应用
/* performance testing */
$PF.begin();
$PF.end(message,color);//default color is red
2.代码重构,处理重复加载相关的问题.
2008/04/01更新:
控制台折叠
技术说明:
1.javascript面向对象编程思想,进行严谨的对象封装.通过组件的松耦合设计,实现组件间($Log,$AjaxUrl,$Performance)的可插接性.
2.采用了先进的DeanEdwards事件模型,并对它进行丰富,封装工具的所有内部事件,使得对已经注册的事件(包括匿名事件)进行统一管理成为可能.
3.不直接在闭包函数中引用dom元素,避免IE内存泄漏.重复加载等问题.
4.提供了一种客户端脚本实现多语言的思路.
5.在<script src=..></script>标签中,加入自定义参数,使得脚本加载参数变为可配置.并在运行时动态加载CSS.
6.在对象内部构建了_msgCached,确保了,即便是在页面未初始化完成的状况下,log也可以被正确记录.
7.控制台拖拽,控制台高度控制,信息清除,时间输出选择,滚动条事件处理,快捷键查就看活动元素HTML,时间format扩展....
8.Ajax方式的远程URL解码组件.
9.客户端脚本执行性能测试组件.
2008/06/15 更新
1.加入 最大化 还原 关闭 链接
最大化:将控制台显示为 布满当前页面。
关闭:隐藏控制台，可以通过 [ctrl+shift+d] 使其再次显示。
2.加入快捷键 [ctrl+shift+d] 显示控制台功能
3.加入"html代码高亮度组件扩展插件"功能,
可以通过[ctrl+shift+s] 测试该功能.
感谢:
该功能结合了silverdrag发布的《javascript实现的超强语法高亮引擎》
帖子地址是 :http://bbs.51js.com/thread-78022-1-1.html
4.工具的在线远程加载:
<script type="text/javascript" src="http://dewind.googlecode.com/files/logger20081016.js"></script>
2008/07/06
加入函数调用栈组件.
调用接口 : $FT.show(procFunc);
参数说明 : procFunc 输出调用栈的方式,不设置 默认为 $Log.loginfo
即 $FT.show() 等效于 $FT.show($Log.loginfo);
也可以设置为别的，比如 alert 等..
使用方法:
example1 : $FT.show();
example2 : $FT.show(alert);
example3 : $FT.show($Log.loginfo);
2008/08/30
控制台尺寸大小可通过鼠标进行调整
2008/09/13 beta版发布,增加的功能:
1.增加help
2.增加层缓冲效果
2008/10/02
右键菜单
2008/10/16
1.cookie支持,页面刷新后依然能够记忆刷新前的控制台位置和大小
2.参数扩展，详细参照《log工具参数说明.html》
3.错误处理支持 window.onerror=$Log.porcessError;详细参照《log工具参数测试.html》
//-----------------------------------------------------------------
Debug_js.rar_ jsdebug_debug js_javascript_js debug_js能debug
版权申诉
125 浏览量
2022-09-24
04:10:23
上传
评论
收藏 50KB RAR 举报
Debug_js.rar （15个子文件） 
js调试 
04.静态脚本块日志测试.htm 442B 03.性能组件测试.htm 1KB 01.example.htm 3KB
10.log工具参数测试.html 850B 09.URL测试[IE].htm 645B 02.方法调用栈测试.htm 286B logger.css 2KB 06.在线加载测试.html 100B
00.使用说明.txt 10KB Highlighter.js 67KB 07.重复加载测试.htm 669B 11.简易模式视图测试.htm 370B 10.log工具参数说明.html 4KB logger.js 54KB 05.悬浮打开缓冲测试.html 1KB
评论0