javascript-log教程

//----------------------------------开发背景----------------------------------------------//
在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 language=javascript src="debugInner.js"></script>  

关于script标签参数的说明:
/**
-------------------------------------------
[String]@param -- url  
-------------------------------------------
将url指向的网页的body.innerHTML加入到targetpage div中
[初始化时]时可以设定

例:
    url="http://www.baidu.com"
    url="http://www.126.com"
    url="http://www.sina.com.cn"
    ...
-------------------------------------------
[Boolean]@param -- debug  
-------------------------------------------
用来控制是否开启javascript的log功能
[初始化时]时可以设定

例:
    debug = true (DEFAULT)
    debug = false

-------------------------------------------
[Boolean]@param -- showtime
-------------------------------------------
用来控制是否在每条log信息前显示当前时间
[初始化]或[运行时]均可以设定

例:
    showtime = false (DEFAULT)
    showtime = true

-------------------------------------------
[String]@param -- local
-------------------------------------------
设置界面的语言
[初始化]或[运行时]均可以设定

例:
    local = "CN"  
    local = "EN" (DEFAULT)
         
-------------------------------------------
[String]@param -- src
-------------------------------------------
设置debugInner.js的路径
[初始化]时可以设定

例:
    src = "D:/jslog/debugInner.js"
    src = "../javascriptlog-tool/debugInner.js"
    src = "http://localhost:8080/myproject/debugInner.js"
    ...
--------------------------------------------------
*/

步骤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程序执行性能无任何影响;需要再次调试时,只需要将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代码
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.客户端脚本执行性能测试组件.

时间: 2024-09-13 20:51:50

javascript-log教程的相关文章

Javascript实例教程(16) 使用Javascript的数学函数

javascript|函数|教程 在JavaScript中,数学方法可以分成以下几类:constans(常数).power functions(乘方函数).trigonometic functions(三角函数).rounding functions(舍入函数)以及random numbers(随机数字).下面逐个说明: 常数和乘方函数 Math.E 自然对数的底(为常数) 2.718 Math.LN10 10的自然对数 2.302 Math.LN2 2的自然对数 0.693 Math.PI 圆

JavaScript 参考教程

javascript|参考|教程 JavaScript 是使用"对象化编程"的,或者叫"面向对象编程"的.所谓"对象化编程",意思是把 JavaScript 能涉及的范围划分成大大小小的对象,对象下面还继续划分对象直至非常详细为止,所有的编程都以对象为出发点,基于对象.小到一个变量,大到网页文档.窗口甚至屏幕,都是对象.这一章将"面向对象"讲述 JavaScript 的运行情况. 对象的基本知识  对象是可以从 JavaScr

JavaScript高级教程5.6之基本包装类型(详细)_javascript技巧

为了便于操作基本类型值,ECMAScript还提供了3个特殊的引用类型:Boolean,Number,String. 实际上,每当读取一个基本类型值的时候,后台应付创建一个对应的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据. var s1="some text"; var s2=s1.substring(2); console.log(s2);//me text 这个例子中s1包含了一个字符串,字符串是基本类型值.第二行调用了s1的subsstring()方法,并将返回

javascript入门教程基础篇_javascript技巧

一. 简介 1. 什么是javascript JavaScript 是网景(Netscape)公司开发的一种基于客户端浏览器.面向(基于)对象.事件驱动式的网页脚本语言. 2. 为什么要使用javascript 表单验证 网页特效 小游戏 Ajax 3.快速入门 在程序中,如果想编写js代码,有两种办法: 1)在html文件中,在一对script标记中,直接编写 <script language='javascript'> document.write('hello'); </scrip

JavaScript 参考教程_基础知识

JavaScript 参考教程  javascript 是使用"对象化编程"的,或者叫"面向对象编程"的.所谓"对象化编程",意思是把 javascript 能涉及的范围划分成大大小小的对象,对象下面还继续划分对象直至非常详细为止,所有的编程都以对象为出发点,基于对象.小到一个变量,大到网页文档.窗口甚至屏幕,都是对象.这一章将"面向对象"讲述 javascript 的运行情况.  对象的基本知识  对象是可以从 javasc

Javascript实例教程(1) 目录

javascript|教程 javascript是一种基于对象和事件驱动并具有安全性能的脚本语言.使用它的目的是与HTML超文本标记语言.Java 脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互作用,从而可以开发客户端的应用程序等.它是通过嵌入或调入在标准的HTML语言中实现的.它的出现弥补了HTML语言的缺陷,它是Java与HTML折衷的选择.本javascript实例教程旨在通过介绍一些实例来加深对Javascrip的理解.本系列教程包括:1. 利用jav

Javascript实例教程(18) 使用字符串函数

javascript|函数|教程|字符串 使用javascript的字符串函数 字符串对象提供了许多方法,但是很少的程序设计人员充分利用它们,这对于一个程序员来说,不能不说这是一种缺陷.字符串提供的方法可以用于操作字符.产生HTML标签以及搜索字符串等等. 下面首先说说什么是字符串.在javascript语言中,字符串就是一种对象.就象在Java中,它们不是作为一系列的字符被存储的,所以字符串的操作必须使用内置的构造器和设置函数来完成.在后来的版本中有了字符串构造器和更多的关于对象的概念.在这个

Javascript实例教程(17) 使用字符串函数

javascript|函数|教程|字符串 字符串对象提供了许多方法,但是很少的程序设计人员充分利用它们,这对于一个程序员来说,不能不说这是一种缺陷.字符串提供的方法可以用于操作字符.产生HTML标签以及搜索字符串等等. 下面首先说说什么是字符串.在JavaScript语言中,字符串就是一种对象.就象在Java中,它们不是作为一系列的字符被存储的,所以字符串的操作必须使用内置的构造器和设置函数来完成.在后来的版本中有了字符串构造器和更多的关于对象的概念.在这个层次上说,字符串是由字母而不是数字组成

Javascript实例教程(14) JS代替CGI

cgi|javascript|js|教程 使用Javascript代替CGI 你可能对CGI脚本比较熟悉,利用CGI你可以通过表单将数字或者变量从一个网页上传递到另外一个网页.当然,你可以利用"POST"将变量以独立的线程进行传递而不显示在浏览器中,或者利用"GET"将变量编码到URL. JavaScript不能在变量在服务器端被处理的时候利用POST方法:但是你可以注意到当你提交一个使用GET方法的表单的时候,定位条上在文件名之后包含了额外的信息,比如: www.

Javascript实例教程(1) 创建弹出式窗口

javascript|创建|教程 利用Javascript创建弹出式窗口 好吧,言归正转,开始我们的第一个教程吧.利用Javascript创建弹出式窗口的目的实际上是打开另外的浏览器窗口.你可以设置这个浏览器窗口的一些属性,如高度.宽度以及是否让该窗口有一个状态条或者工具条.在下面的例子中,我将窗口设置为:350 x 400,即高度为350像素,宽度为400像素:其中也包括了另外的一些设置,如滚动条:而将其它的设置(如状态条.菜单条)都设置为没有(no). 下面是具体的代码,你可以将它放置到网页