Javascript的调试一般都采用alert函数来打印出感兴趣的信息,不过这种方法档调试的信息比较多的时候,就显得非常麻烦。也可以采用一些专门的Javascript调试器,IE和Firefox都有,也没有具体用过,不太做太多评价,感觉这样的调试有点杀鸡用牛刀的味道。而且通用性不强,要是换了浏览器又得重新学习一种调试工具。

fvlogger(http://alistapart.textdrive.com/articles/jslogging#fvlogger)是一个模仿log4j的Javascript调试库,采用将所有的调试信息写入到DIV中,再根据不同的分类(debug,info,warn,error,fatal)来查看。

使用起来非常简单,它的网站上就有例子。下面是我学习的时候写的一个例子:

<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>JSLog测试</title>
<script type="text/javascript" src="fvlogger/logger.js"></script>
<link rel="stylesheet" type="text/css" href="fvlogger/logger.css" />
</head>
<body>
<input type="button" name="toggleBtn" value="显示调试信息" onclick="toggleDebugConsole();return false;">
<div id="fvlogger" style="display:none">
<dl>
<dt>fvlogger</dt>
<dd class="all"><a href="#fvlogger" onclick="showAll();" title="show all" id="all">all</a></dd>
<dd class="debug"><a href="#fvlogger" onclick="showDebug();" title="show debug" id="showDebug">debug</a></dd>
<dd class="info"><a href="#fvlogger" onclick="showInfo();" title="show info" id="showInfo">info</a></dd>
<dd class="warn"><a href="#fvlogger" onclick="showWarn();" title="show warnings" id="showWarn">warn</a></dd>
<dd class="error"><a href="#fvlogger" onclick="showError();" title="show errors" id="showError">error</a></dd>
<dd class="fatal"><a href="#fvlogger" onclick="showFatal();" title="show fatals" id="showFatal">fatal</a></dd>
<dd><a href="#fvlogger" onclick="eraseLog(true);" title="erase">erase</a></dd>
</dl>
</div>
<script language="javascript">
var showdebug=false;
function toggleDebugConsole(){
if (showdebug==false){
showdebug=true;
toggleBtn.value="隐藏调试信息";
document.getElementById("fvlogger").style.display="block";
}else {
showdebug=false;
toggleBtn.value="显示调试信息";
document.getElementById("fvlogger").style.display="none";
}
}
</script>
<script language="javascript">
debug("调试信息");
info("一般信息");
warn("警告信息");
error("错误信息");
//fatal("严重错误信息");
</script>
</body>
</html>
</pre>

下载fvlogger,将用到的js,css,图片(logger.css,logger.js,*.png)都放到fvlogger子目录下就可以了。