javascript-log教程

//----------------------------------開發背景----------------------------------------------//
在javascript開發過程中，如果總是使用alert的方式偵錯工具,很難滿足企業級開發的需要。  
比如ajax項目中，存在一個3000行左右JS檔案，其中存在各種自訂的javascript對象。
開發的過程中，總是需要在js程式執行到某個關鍵點的時候，監視自訂對象的值或狀態，
判斷執行結果是否是預期的樣子.
alert的方式存在以下兩個明顯的缺點：  
1.假如一次執行中有n個關鍵點的值都想隨時監視，使用alert您就不的不點夠n次確認，
- 給開發人員的感覺是很不連貫也不直觀，很難流暢發現隱藏很深的問題。  
2.用於調試的alert語句，在發布的時候必須刪除掉，等有朝一日需要再次調試的時候，
- 您就不得不回憶之前的關鍵點，分別加上alert，艱難的調試。  

鑒於以上需求,本著簡單實用的原則,自己動手編寫了這個javascript調試工具，全部程式只有10kb左右。
使用該工具之後，以上兩個問題，變得迎刃而解。您或許會發現,IE下調試javascript程式變的便利。  
該工具主要有以下特點：  
1.完全的可插入式思想，對目標程式沒有任何負作用。  
2.使用方法簡單,方便，只需要引入一行JS代碼。  

//----------------------------------使用方法---------------------------------------------//
  
步驟1.將類似於下面這樣的一行script標籤加入到您的目標頁面(JSP,ASP,HTML,PHP等)中

<SCRIPT language=javascript src="debugInner.js"></script>  

關於script標籤參數的說明:
/**
-------------------------------------------
[String]@param -- url  
-------------------------------------------
將url指向的網頁的body.innerHTML加入到targetpage div中
[初始化時]時可以設定

例:
    url="http://www.baidu.com"
    url="http://www.126.com"
    url="http://www.sina.com.cn"
    ...
-------------------------------------------
[Boolean]@param -- debug  
-------------------------------------------
用來控制是否開啟javascript的log功能
[初始化時]時可以設定

例:
    debug = true (DEFAULT)
    debug = false

-------------------------------------------
[Boolean]@param -- showtime
-------------------------------------------
用來控制是否在每條log資訊前顯示目前時間
[初始化]或[運行時]均可以設定

例:
    showtime = false (DEFAULT)
    showtime = true

-------------------------------------------
[String]@param -- local
-------------------------------------------
設定介面的語言
[初始化]或[運行時]均可以設定

例:
    local = "CN"  
    local = "EN" (DEFAULT)
         
-------------------------------------------
[String]@param -- src
-------------------------------------------
設定debugInner.js的路徑
[初始化]時可以設定

例:
    src = "D:/jslog/debugInner.js"
    src = "../javascriptlog-tool/debugInner.js"
    src = "http://localhost:8080/myproject/debugInner.js"
    ...
--------------------------------------------------
*/

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

//----------------------------------最新下載---------------------------------------//
下載: http://public.box.net/jzshmyt
//----------------------------------更新履曆---------------------------------------//
附加說明:
1.jslog中,對的內部事件進行統一管理.
-內測階段,留了一個測試"取消事件註冊"的介面－通過雙擊console 可以調用
2.console上方連結的說明:
- [移動控制台]:可以移動控制台或改變控制台的寬度
- [增大高度]/[減小高度]:可以根據需要調整控制台的高度
- MaxHeight:螢幕高度,MinHeight:100px
- [清除資訊]:清除控制台中的資訊
- [顯示/隱藏時刻]:可以在運行時設定是否顯示輸出log時的時刻
3.document的onscroll事件發生時,只有在console不在可見範圍內時才響應.
4.快速鍵[ctrl+shift+s],再console中顯示當前使用中的元素的HTML代碼
5.該工具所有功能只在IE下測試通過.

2008/02/14更新:
1.加入效能測試組件,支援嵌套調用,可參照example.htm中的應用
/* performance testing */
  $PF.begin();
  $PF.end(message,color);//default color is red
2.代碼重構,處理重複載入相關的問題.

2008/04/01更新:
控制台摺疊

技術說明:
1.javascript物件導向編程思想,進行嚴謹的對象封裝.通過組件的松耦合設計,實現組件間($Log,$AjaxUrl,$Performance)的可插接性.
2.採用了先進的DeanEdwards事件模型,並對它進行豐富,封裝工具的所有內部事件,使得對已經註冊的事件(包括匿名事件)進行統一管理成為可能.
3.不直接在閉包函數中引用dom元素,避免IE記憶體流失.重複載入等問題.
4.提供了一種用戶端指令碼實現多語言的思路.
5.在<script src=..></script>標籤中,加入自訂參數,使得指令碼載入參數變為可配置.並在運行時動態載入CSS.
6.在對象內部構建了_msgCached,確保了,即便是在頁面未初始化完成的狀況下,log也可以被正確記錄.
7.控制台拖拽,控制台高度控制,資訊清除,時間輸出選擇,捲軸事件處理,快速鍵查就看使用中的元素HTML,時間format擴充....
8.Ajax方式的URL網站解碼組件.
9.用戶端指令碼執行效能測試組件.