JavaScript日志工具介绍

   前几天在《Ajax与Java高级程序设计》这本书上面发现了有介绍JavaScript调试工具的文章，觉得写的很好，受益很多，因为目前阶段调试JavaScript99%的都使用的是alert()，这样的做法确实是有效果的，但是问题在于必须在程序公开发布前删除所有的alert()语句，这样就比较麻烦的了，而且还容易出错误，让人很郁闷的。
   该书上介绍了两个调试JavaScript的方式，一种是叫做：Log4JS;一种叫做：Lumberjack。我个人比较喜欢后者，现在将详细介绍一下，并附上例子。
   Log4JS:Log4JS在思想上与Apache的log4j类似的JavaScript调试工具。Log4JS把日志输出到一个可定制的日志类中。可以在http://log4js.sourceforge.net上找到它。可以使用的日志类有四个：alert,write,popup,console。write日志类把日志写入浏览器的一个新的页面。popup日志类把日志写入一个单独的浏览器窗口，这有利于跟踪日志消息。最后console日志类把日志写到Safari的控制台上，如果浏览器不是Safari，那么就把日志写入一个对话框。
   Log4JS与log4j的相似之处在于它们都定义了不同的日志级别。Log4JS中的日志级别按照递增顺序依次是DEBUG、INFO、WARN、ERROR、FATAL和NONE。一个日志类只会记录与自己的级别相同或更高的信息。例如，如果一个日志类的级别是WARN，那么由info()方法产生的消息将不会被输出，但是由warn()、error()或fatal()方法产生的信息就会被输出。
    如果你曾经使用过log4j，那么使用Log4JS就会非常简单。需要记住的是，把日志类的日志级别设置为NONE可以禁用日志类。在你的产品级应用中使用Log4JS的一种方法是在一个单独的JavaScript文件中定义应用所用到的所有日志类，这样就可以在所有页面中使用它们。在把应用部署到产品环境中时，只需更新这个JavaScript文件，禁用所有的日志记录即可。更进一步，你也可以使用Ant的replace任务根据执行构建类型的不同（开发、测试或产品）而设置日志级别。
    Lumberjack：Lumberjack是另一款基于JavaScript的日志记录实用工具，其网址是http://gleepglop.com/javascripts/logger。和Log4JS一样，Lumberjack也受到了Apache log4j的启发。
    Lumberjack与其他JavaScript日志框架的不同之处在于它显示日志信息的方法。Lumberjack把所有的日志信息都写入一个特殊的窗口，使用Alt+D（在Mac
OS X上是Cmd+D）组合键可以激活这个窗口。这个输出窗口是一个显示在网页底部的浮动窗口，即使在上下滚动网页的时候，它的位置也不会改变。这个输出窗口还包含一个基于正则表达式的过滤器，所以只会显示指定类型的错误。同时，它还包含一个JavaScript命令行，可以在其中输入JavaScript命令。
    Lumberjack需要Prototype库：Lumberjack依赖于JavaScript库Prototype，可以在http://prototype.conio.net上找到这个库。由于这种依赖性，当在HTML页面中使用<script>标签分别引入它们的JavaScript文件时，一定要把Prototype列在Lumberjack之前。浏览器会根据JavaScript文件在HTML页面中列出的顺序读取并执行它们。如果把Lumberjack列在Prototype之前，那么当浏览器尝试执行Lumberjack脚本的时候就会发生错误，因为找不到未被执行的Prototype脚本中的值。
    与使用Log4JS时需要创建单独的日志类不同，Lumberjack把所有的日志方法都作为Logger类的静态方法公开。Logger类共公开了4个日志方法：info、debug、warning和error。每个方法都接受一个代表被记录信息的字符串参数。Logger类还公开了一个log方法，它接受两个参数：代表被记录信息的字符串和代表日志级别的字符串。
    以下是使用Lumberjack的例子主要代码：
    calc.js:

/**
 * @author fuhao
 */
function clearResult(){
	document.getElementById("result").value = "";
}
function calc(){
	clearResult();
	var first = document.getElementById("first").value;
	var second = document.getElementById("second").value;
	if(first=="" || second=="" || first==null || second==null){
		Logger.info("请输入加数和被加数");
		return ;
	}
	Logger.info("加数是："+first+"　　　"+"被加数是："+second);
	
	var firstNumber = parseInt(first);
	var secondNumber = parseInt(second);
	
	if(isNaN(firstNumber)){
		Logger.error("输入的加数"+first+"不是数字");
		clearResult();
		return ;
	}
	if(isNaN(secondNumber)){
		Logger.info("输入的被加数"+second+"不是数字");
		return ;
	}
	var sum = firstNumber + secondNumber ;
	document.getElementById("result").value = sum ;
	Logger.info("最后得到的结果是:"+sum);
}

评论

7 楼 suneyejava 2013-01-11  

僧_唐 写道

使用javascipt日志的必要性 不像其他的日志的记录那么有意义

仍然学习了...

看你开发的是什么了，如果只是在web上加点简单的js那当然没什么太大意义，但是如果你开发的系统主要依赖于js的话，那就有很大用处了。

6 楼 jzshmyt 2012-07-14  

网上的很多js日志调试工具都不怎么好用，不妨试试
javascript logger&debug toolbox - kingfishers

Kingfishers是用javascript语言编写的javascript日志调试工具箱,
能够代替alert,在浏览器中连续输出javascript运行日志,主要用于客户端脚本的分析和查错。

5 楼 僧_唐 2012-07-06  

使用javascipt日志的必要性 不像其他的日志的记录那么有意义

仍然学习了...

4 楼 mawt 2010-09-14  

firefox是 shift+alt+d

3 楼 youjianbo_han_87 2009-06-09  

tryonmind 写道

Alt+D打不开调试窗口啊，Alt+D是地址栏获得焦点的快捷键

IE里面可以，firefox不可以

2 楼 angkorpeach 2008-09-25  

谢谢你，我找了好久的东西！

1 楼 tryonmind 2008-09-05  

Alt+D打不开调试窗口啊，Alt+D是地址栏获得焦点的快捷键