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子目錄下就可以了。