在javascript開(kāi)發(fā)過(guò)程中，如果總是使用alert的方式調(diào)試程序，在某些簡(jiǎn)單的程序中是可行的. 
但是在通常的項(xiàng)目很復(fù)雜，這種方式已經(jīng)很難滿足，企業(yè)級(jí)開(kāi)發(fā)的需要。 
比如ajax項(xiàng)目中，存在一個(gè)3000行左右JS文件，其中存在各種自定義的javascript對(duì)象。
開(kāi)發(fā)的過(guò)程中，總是需要在js程序執(zhí)行到某個(gè)關(guān)鍵點(diǎn)的時(shí)候，監(jiān)視自定義對(duì)象的值或狀態(tài)，
判斷執(zhí)行結(jié)果是否是預(yù)期的樣子，如果您通過(guò)alert看到某些關(guān)聯(lián)對(duì)象的值，是很困難的。
存在以下兩個(gè)明顯的缺點(diǎn)： 
1.假如一次執(zhí)行中有n個(gè)關(guān)鍵點(diǎn)的值都想隨時(shí)監(jiān)視，使用alert您就不的不點(diǎn)夠n次確認(rèn)，給開(kāi)發(fā)者的感覺(jué)是很不連貫也不直觀，很難流暢發(fā)現(xiàn)隱藏很深的問(wèn)題。 
2.用于調(diào)試的alert語(yǔ)句，在發(fā)布的時(shí)候必須刪除掉，等有朝一日需要再次調(diào)試的時(shí)候，您就不得不回憶之前的關(guān)鍵點(diǎn)，分別加上alert，艱難的調(diào)試。 
使用該工具之后，以上兩個(gè)問(wèn)題，變得迎刃而解。 
鑒于以上需求，本人本著簡(jiǎn)單實(shí)用的原則， 
自己動(dòng)手編寫(xiě)了這個(gè)javascript調(diào)試工具，全部程序只有300kb左右。 
該工具主要有以下特點(diǎn)： 
1.完全的可插入式思想，對(duì)目標(biāo)程序沒(méi)有任何負(fù)作用。 
2.使用方法簡(jiǎn)單,方便，只需要引入一行JS代碼。 
使用后，您或許會(huì)發(fā)現(xiàn)，調(diào)試JS程序變的便利。 

//----------------------------------使用方法---------------------------------------------//
步驟1.將下載后JSDebugTool.zip,解壓到任意目錄，比如：D:\tools\JSDebugTool 
步驟2.將類(lèi)似于下面這樣的一行JS代碼加入到您的目標(biāo)程序(JSP,ASP,HTML,PHP等)中,下面的寫(xiě)法都是支持的.
<!-- debug功能不開(kāi)啟、不顯示time、使用相對(duì)路徑引入debugInner.file--> 
<SCRIPT language=javascript debug=false showtime=false src="../JSDebugTool/debugInner.file"></script> 
<!-- debug功能開(kāi)啟、顯示time、使用WEB路徑引入debugInner.file--> 
<SCRIPT language=javascript debug=true showtime=true src="http://localhost:8080/myproject/JSDebugTool/debugInner.file"></script> 
<!-- debug功能開(kāi)啟、不顯示time、使用本地絕對(duì)路徑引入debugInner.file--> 
<SCRIPT language=javascript src="D:/tools/JSDebugTool/debugInner.file"></script> 
※注釋: 
debug=true/false 
    true : Javascript debug 功能開(kāi)啟,默認(rèn)值.(Development) 
    false : Javascript debug 功能關(guān)閉.(Release) 
    不設(shè)定"debug"參數(shù)時(shí),默認(rèn)為true. 
src屬性可以設(shè)定為(絕對(duì)路徑、相對(duì)路徑、WEB路徑等) 
    debugInner.file : 采用嵌入模式模式 
showtime=true/false  
    true : 在每條debug信息前顯示當(dāng)前時(shí)間。 
    false : 不顯示當(dāng)前時(shí)間,只顯示debug信息。 
    不設(shè)定"showtime"參數(shù)時(shí),默認(rèn)為false. 
url屬性 可以為目標(biāo)頁(yè)面的url，比如http：//www.baidu.com
  -當(dāng)設(shè)置了url參數(shù)時(shí),將url指向的網(wǎng)頁(yè)的innerHTML加入到targetpage div中


步驟3.測(cè)試代碼如下： 
<!--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-->
項(xiàng)目龐大的時(shí)候，需要總是在程序中保留一些調(diào)試信息，必要的時(shí)候進(jìn)行調(diào)試。 
所以，能夠讓關(guān)鍵點(diǎn)的信息隨時(shí)打印出來(lái)也是很重要的，同時(shí)保證在Release之后，對(duì)目標(biāo)腳本執(zhí)行性能沒(méi)有任何影響是必須要考慮的問(wèn)題。 
本工具提供的print接口是：jslog(msg,color);//msg:信息 color:信息的顏色
如果release的時(shí)候,你希望將"步驟2"加入到目標(biāo)程序中的JS刪除,也可以在您的程序中重構(gòu)一個(gè)方法,名字隨意.比如： 
function out(msg,color){ 
    if(jslog) jslog(msg,color); 
} 
統(tǒng)一使用自己的定義的方法也可以,比如： 
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 
} 

不過(guò)通常來(lái)說(shuō)Release的時(shí)候?qū)ebug開(kāi)關(guān)設(shè)置為:debug=false,不需要?jiǎng)h除目標(biāo)程序中的調(diào)試代碼,對(duì)目標(biāo)JS程序執(zhí)行性能無(wú)任何影響;需要再次調(diào)試時(shí),只需要將debug開(kāi)關(guān)設(shè)置為:debug=true 即可.

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

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

//----------------------------------更新履歷---------------------------------------//

2007/12/23 更新:(目前共15K)
1.對(duì)jslog中的內(nèi)部事件進(jìn)行統(tǒng)一管理.內(nèi)測(cè)階段,留了一個(gè)測(cè)試"取消事件注冊(cè)"的接口－通過(guò)雙擊console 可以調(diào)用
2.debugInner頁(yè)面布局調(diào)整,使debugInner中的console浮動(dòng)、可拖動(dòng)、可調(diào)整寬度.在console中top和left小于40的部位可拖。
說(shuō)明: 希望能趨于簡(jiǎn)單,實(shí)用,不喜歡臃腫的。今后只更新debugInner,不再更新debugPopup

最新評(píng)論