開發(fā)js組件的時間調(diào)試總是麻煩的，最常用的就是用alert或者debugger來測試js的運行狀態(tài)。但這兩種方式都有它的局限性，alert會有中斷，有些時候alert出來的值并不可靠，閉包的時候用alert可能會得到不正確的值。debugger使用起來其實也挺糾結(jié)的，只有ie支持。所以最合理的方式是js把運行過程需要調(diào)試的值輸出到頁面，或者寫到cookie也可以，這種方式不會有alert中斷帶來值不正確的問題，也不會受瀏覽器類型的限制，唯一糾結(jié)的是操作起來很麻煩。

于是，有了下面說的這個js組件。這個組件的實現(xiàn)參考了log4net組件的記錄方式，我們利用這個js的logger組件，就可以用log的輸出的方式來進(jìn)行你的調(diào)試工作了。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

/* js調(diào)試組件 */ (function () { ????var logger = function (level, object, viewType) { ????????this.level = level; ????????this.object = object; ????????this.viewType = viewType; ????} ????logger.LEVEL_DEBUG = 0; ????logger.LEVEL_INFO = 1; ????logger.LEVEL_WARN = 2; ????logger.LEVEL_ERROR = 3; ????logger.LEVEL_FATAL = 4; ????logger.VIEW_TYPE_ALERT = 0; ????logger.VIEW_TYPE_APPEND = 1; ????logger.prototype = { ????????setLevel: function (level) { ????????????this.level = level; ????????}, ????????setObject: function (o) { ????????????if (typeof o == 'string') { ????????????????this.object = document.getElementById(o); ????????????} else { ????????????????this.object = o; ????????????} ????????}, ????????setViewType: function (type) { ????????????this.viewType = type; ????????}, ????????log: function (s) { ????????????this.message(100, s); ????????}, ????????debug: function (s) { ????????????this.message(logger.LEVEL_DEBUG, s); ????????}, ????????info: function (s) { ????????????this.message(logger.LEVEL_INFO, s); ????????}, ????????warn: function (s) { ????????????this.message(logger.LEVEL_WARN, s); ????????}, ????????error: function (s) { ????????????this.message(logger.LEVEL_ERROR, s); ????????}, ????????fatal: function (s) { ????????????this.message(logger.LEVEL_FATAL, s); ????????}, ????????message: function (level, s) { ????????????if (level >= this.level) { ????????????????if (this.object != null) { ????????????????????this.object.innerHTML = s; ????????????????} else if (this.viewType == logger.VIEW_TYPE_ALERT) { ????????????????????alert(s); ????????????????} else { ????????????????????document.body.appendChild(document.createTextNode(s)); ????????????????????document.body.appendChild(document.createElement("br")); ????????????????} ????????????} ????????} ????}; ????if (typeof window.Logger == 'undefined' || window.Logger == null) ????????window.Logger = new logger(logger.LEVEL_DEBUG, null, logger.VIEW_TYPE_APPEND); })();

怎么使用呢？

這個js組件往window對象注冊了Logger對象，我們可以用Logger.log/Logger.debug/Logger.info/Logger.warn/Logger.error/Logger.fatal來輸出不同的調(diào)試信息。

示例代碼如下：

1 2	Logger.debug(new Date()); Logger.debug(new Date().addHours(3));

很簡單，再也不用每個地方都寫document.getElementId().innerHtml或者alert/debugger來輸出內(nèi)容了。

示例代碼中使用的addHours是我擴(kuò)展js的Date對象方法，想要了解更多的朋友可以查看《擴(kuò)展js的Date方法》。

轉(zhuǎn)載于:https://www.cnblogs.com/moozi/archive/2010/11/20/js-debug-logger.html

總結(jié)

以上是生活随笔為你收集整理的简单实用的js调试logger组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。