|
|
但是在通常的項目很復(fù)雜，這種方式已經(jīng)很難滿足，企業(yè)級開發(fā)的需要。
比如ajax項目中，存在一個3000行左右JS文件，其中存在各種自定義的Javascript對象。
開發(fā)的過程中，總是需要在js程序執(zhí)行到某個關(guān)鍵點的時候，監(jiān)視自定義對象的值或狀態(tài)，
判斷執(zhí)行結(jié)果是否是預(yù)期的樣子，如果您通過alert看到某些關(guān)聯(lián)對象的值，是很困難的。
存在以下兩個明顯的缺點：
1.假如一次執(zhí)行中有n個關(guān)鍵點的值都想隨時監(jiān)視，使用alert您就不的不點夠n次確認，給開發(fā)者的感覺是很不連貫也不直觀，很難流暢發(fā)現(xiàn)隱藏很深的問題。
2.用于調(diào)試的alert語句，在發(fā)布的時候必須刪除掉，等有朝一日需要再次調(diào)試的時候，您就不得不回憶之前的關(guān)鍵點，分別加上alert，艱難的調(diào)試。
使用該工具之后，以上兩個問題，變得迎刃而解。
鑒于以上需求，本人本著簡單實用的原則，
自己動手編寫了這個Javascript調(diào)試工具，全部程序只有300kb左右。
該工具主要有以下特點：
1.完全的可插入式思想，對目標程序沒有任何負作用。
2.使用方法簡單,方便，只需要引入一行JS代碼。
使用后，您或許會發(fā)現(xiàn)，調(diào)試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 功能關(guān)閉.(Release)
不設(shè)定"debug"參數(shù)時,默認為true.
src屬性可以設(shè)定為(絕對路徑、相對路徑、WEB路徑等)
debugInner.file : 采用嵌入模式模式
showtime=true/false
true : 在每條debug信息前顯示當前時間。
false : 不顯示當前時間,只顯示debug信息。
不設(shè)定"showtime"參數(shù)時,默認為false.
url屬性 可以為目標頁面的url，比如http：//www.baidu.com
-當設(shè)置了url參數(shù)時,將url指向的網(wǎng)頁的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-->
項目龐大的時候，需要總是在程序中保留一些調(diào)試信息，必要的時候進行調(diào)試。
所以，能夠讓關(guān)鍵點的信息隨時打印出來也是很重要的，同時保證在Release之后，對目標腳本執(zhí)行性能沒有任何影響是必須要考慮的問題。
本工具提供的print接口是：jslog(msg,color);//msg:信息 color:信息的顏色
如果release的時候,你希望將"步驟2"加入到目標程序中的JS刪除,也可以在您的程序中重構(gòu)一個方法,名字隨意.比如：
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
}
不過通常來說Release的時候?qū)ebug開關(guān)設(shè)置為:debug=false,不需要刪除目標程序中的調(diào)試代碼,對目標JS程序執(zhí)行性能無任何影響;需要再次調(diào)試時,只需要將debug開關(guān)設(shè)置為:debug=true 即可.
//----------------------------------最新下載---------------------------------------//
下載(2007/12/23 更新): http://www.box.NET/shared/bc3s1hdkw0
//----------------------------------更新履歷---------------------------------------//
2007/12/23 更新:(目前共15K)
1.對jslog中的內(nèi)部事件進行統(tǒng)一管理.內(nèi)測階段,留了一個測試"取消事件注冊"的接口－通過雙擊console 可以調(diào)用
2.debugInner頁面布局調(diào)整,使debugInner中的console浮動、可拖動、可調(diào)整寬度.在console中top和left小于40的部位可拖。
說明: 希望能趨于簡單,實用,不喜歡臃腫的。今后只更新debugInner,不再更新debugPopup
JavaScript技術(shù)：2007/12/23更新創(chuàng)意無限,簡單實用(javascript log)，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
