2007/12/23更新創意無限,簡單實用(javascript log)_javascript技巧

在javascript開發過程中，如果總是使用alert的方式偵錯工具，在某些簡單的程式中是可行的. 
但是在通常的項目很複雜，這種方式已經很難滿足，企業級開發的需要。 
比如ajax項目中，存在一個3000行左右JS檔案，其中存在各種自訂的javascript對象。
開發的過程中，總是需要在js程式執行到某個關鍵點的時候，監視自訂對象的值或狀態，
判斷執行結果是否是預期的樣子，如果您通過alert看到某些關聯對象的值，是很困難的。
存在以下兩個明顯的缺點： 
1.假如一次執行中有n個關鍵點的值都想隨時監視，使用alert您就不的不點夠n次確認，給開發人員的感覺是很不連貫也不直觀，很難流暢發現隱藏很深的問題。 
2.用於調試的alert語句，在發布的時候必須刪除掉，等有朝一日需要再次調試的時候，您就不得不回憶之前的關鍵點，分別加上alert，艱難的調試。 
使用該工具之後，以上兩個問題，變得迎刃而解。 
鑒於以上需求，本人本著簡單實用的原則， 
自己動手編寫了這個javascript調試工具，全部程式只有300kb左右。 
該工具主要有以下特點： 
1.完全的可插入式思想，對目標程式沒有任何負作用。 
2.使用方法簡單,方便，只需要引入一行JS代碼。 
使用後，您或許會發現，調試JS程式變的便利。 

//----------------------------------使用方法---------------------------------------------//
步驟1.將下載後JSDebugTool.zip,解壓到任意目錄，比如：D:\tools\JSDebugTool 
步驟2.將類似於下面這樣的一行JS代碼加入到您的目標程式(JSP,ASP,HTML,PHP等)中,下面的寫法都是支援的.
<!-- debug功能不開啟、不顯示time、使用相對路徑引入debugInner.file--> 
<SCRIPT language=javascript debug=false showtime=false src="../JSDebugTool/debugInner.file"></script> 
<!-- debug功能開啟、顯示time、使用WEB路徑引入debugInner.file--> 
<SCRIPT language=javascript debug=true showtime=true src="http://localhost:8080/myproject/JSDebugTool/debugInner.file"></script> 
<!-- debug功能開啟、不顯示time、使用本地絕對路徑引入debugInner.file--> 
<SCRIPT language=javascript src="D:/tools/JSDebugTool/debugInner.file"></script> 
※注釋: 
debug=true/false 
    true : Javascript debug 功能開啟,預設值.(Development) 
    false : Javascript debug 功能關閉.(Release) 
    不設定"debug"參數時,預設為true. 
src屬性可以設定為(絕對路徑、相對路徑、WEB路徑等) 
    debugInner.file : 採用嵌入模式模式 
showtime=true/false  
    true : 在每條debug資訊前顯示目前時間。 
    false : 不顯示目前時間,只顯示debug資訊。 
    不設定"showtime"參數時,預設為false. 
url屬性 可以為目標頁面的url，比如http：//www.baidu.com
  -當設定了url參數時,將url指向的網頁的innerHTML加入到targetpage div中


步驟3.測試代碼如下： 
<!--TEST begin--> 
<script> 
    function test(){ 
        var head = document.getElementsByTagName('HEAD').item(0); 
        jslog(null,"red");//null 
        jslog(1/3,"red");//number 
        jslog(1==2,"red");//boolean 
        jslog(test,"blue");//function 
        jslog("hello world!","red");//string 
        jslog(head);//object 
    } 
</script> 
<input type="button" value="TEST" > 
<!--TEST end-->
項目龐大的時候，需要總是在程式中保留一些調試資訊，必要的時候進行調試。 
所以，能夠讓關鍵點的資訊隨時列印出來也是很重要的，同時保證在Release之後，對目標指令碼執行效能沒有任何影響是必須要考慮的問題。 
本工具提供的print介面是：jslog(msg,color);//msg:資訊 color:資訊的顏色
如果release的時候,你希望將"步驟2"加入到目標程式中的JS刪除,也可以在您的程式中重構一個方法,名字隨意.比如： 
function out(msg,color){ 
    if(jslog) jslog(msg,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 即可.

//----------------------------------最新下載---------------------------------------//

下載(2007/12/23 更新): http://www.box.net/shared/bc3s1hdkw0

//----------------------------------更新履曆---------------------------------------//

2007/12/23 更新:(目前共15K)
1.對jslog中的內部事件進行統一管理.內測階段,留了一個測試"取消事件註冊"的介面－通過雙擊console 可以調用
2.debugInner頁面配置調整,使debugInner中的console浮動、可拖動、可調整寬度.在console中top和left小於40的部位可拖。
說明: 希望能趨於簡單,實用,不喜歡臃腫的。今後只更新debugInner,不再更新debugPopup