Wednesday, December 31, 2008 - 文章

jQuery Logging Plugin

在參考一些Javascript範例時，常看到console.log()的寫法，昨天才發現這又是一個被我忽略的好東西。在Firefox上，我們可以透過console.log()輸出一些Debug資訊，並使用Firebug檢視，跟.NET偵錯時的Debug.WriteLine()有異曲同工之妙!

另外，console的能耐還不只於此，它還可以用來計算程式執行時間、顯示DOM資訊，甚至開啟Profiler記下程式碼執行的歷程，功能強到破表。

jQuery Logging是一個只寫了四列的jQuery Plugin，提供將jQuery內容傳至console顯示及記錄訊息的能力。我加了一點工，增加檢測console物件是否存在的邏輯，以免發生在不支援console的瀏覽器上產生錯誤。

jQuery.fn.log = function(msg) {
    if (typeof console != "undefined")
        console.log("%s: %o", msg, this);
    return this;
};

如上圖，除了訊息外，jQuery物件裡的元素也會顯示出來，點一下就可以展開來檢視細節。

console.log()是Mozilla家族的專利，用IE的人可以試試Companion.JS或Faux Console，不過依我測試的結果，都只能做到顯示訊息內容，無法像Firebug一樣直接檢視物件細節。

Firebug對Web Developer來說真是殺手級的工具，只能對IE說: "加油，好嗎?"

Posted 31 December 2008 08:07 AM 由 Jeffrey | 1 comment(s)
Filed under: ,

搜尋

Go

<December 2008>
SunMonTueWedThuFriSat
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910
 
RSS
【工商服務】
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人，十年的IT職場生涯，寫過系統、管過專案， 也帶過團隊，最後還是無怨無悔地選擇了技術鑽研這條路，近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


BlogLook Score and Rank

Syndication