2014年7月31日

超輕量化JavaScript除錯工具


“Debugging sucks. Testing rocks!”,如同Google工程師所說,與測試工作比起來,除錯實在是一件很沒效益的事,尤其是當問題已經發生,頭已經抱著燒的狀況下要除錯更是苦不堪言。倒底測試有多重要呢?Google甚至還開始提倡一個馬桶上的測試活動 "Testing on the Toilet"!不過這篇倒不是要跟大家介紹Google如何逼工程師一邊上廁所一邊測試(有點扯遠了),而是就算已經做好妥善的測試,除錯仍是避免不了的工作,經過上一篇IE你別鬧了的經驗後,發現雖然工作上不常用到JavaScript,但是一旦遇到這方面的問題,除錯過程總是非常惱人,尤其我們還需要把各種瀏覽器版本都檢查過一遍才行。當時正好在網路上看到了一個簡單好用的JavaScript除錯工具– Deb.js,雖然說是除錯工具,但更精准地說,Deb.js算是"將function的參數及結果自動地輸出到Console.log的一個小工具"。


還不曉得Deb.js之前,我們常常是靠手工將變數的數值output到console來檢視結果是否符合預期,例如下面這個範例:

var doSomething = function(value) {
     console.log('start doSomething,arg:'+value);
     return value * 2;
};
console.log(doSomething(42));

在這個例子中,我們需要知道doSomething這個function執行前後的變化,因此在function執行前以及執行後都將變數的內容都印出來看看,如果牽扯範圍較大,則會繼續把其他function都加上Console輸出,有時候頭腦處於遲鈍狀態,一時抓不出臭蟲,甚至會出現需要暴力地將每一行程式都加上console.log來除錯的窘境 XD。

使用deb.js


這時候使用deb.js便可以輕鬆地降低這個困擾,首先我們從gihub上下載deb.js專案,在build目錄會看到一個deb.min.js,我們可以直接將它放入自己的專案中。

enter image description here

接下來在網頁開頭加入script宣告。

<script src="deb.min.js"></script>

最後我們在每個function後面加入.deb() 就大功告成了。

var calculateSomething = function(cb) {
    // ...
}.deb();

以deb.js專案目錄中的example為例(位於deb專案的/example子目錄),此範例中有一個檢查欄位輸入的javascript,

window.onload = function() {
        $('[value="register"]').on('click', function() {
            Module.collectData(function(err, data) {
                if(err) {
                    Module.error(err);
                } else {
                    Module.success(data);
                }
            }.debc('My buggy function'));
        });
    }

用瀏覽器開啓範例中的index.html之後,順便也把console視窗打開,(如果是使用Chrome的話,可以在網頁上按滑鼠右鍵點選”檢視元素”功能),畫面上可以看到如下圖的Name及Address輸入欄,我在測試過程輸入了兩次資料,第一次是輸入Name:aaa以及Address:bbb,第二次是Name:xxx,但Address則是留空,這兩次的request的參數傳遞的log則都會出現在下方的Console視窗中,因為該範例是使用.debc()的方式,因此log的格式還會有collapsing的收折效果。

enter image description here

另外,我們還可以為function定義特殊的label來區別,當log數量很龐大時可以快速找到對應的內容,如範例中指定.debc(‘My buggy function’)的方式,Console 視窗輸出function log的時候也會以此label作為辨識。

檢視stack trace來除錯


deb.js也會將function call的stack trace整理在同一組console中,這對除錯相當方便。假設我們將上述範例index.html的My buggy function改成如下(修改第54行的if判斷):

window.onload = function() {
        $('[value="register"]').on('click', function() {
            Module.collectData(function(err, data) {
                if(typeof err === 'object') {
                    Module.error(err);
                } else {
                    Module.success(data);
                }
            }.debc('My buggy function'));
        });
    }

然後嘗試重新輸入一次如下圖參數,這時候會發現出錯了TypeError的錯誤,打開Console可以從中檢視出現錯誤的function以及stack trace內容,原來當兩個欄位都有填寫的狀況下,第53行的err參數是傳遞null進來,因此造成第54行的if判斷為true,後面的err.msg當然就無法執行而造成TypeError了。

enter image description here

了解了deb.js的使用方式之後,我們只要把專案的所有javasciprt function都加上.deb()方法即可,接下來便可以輕輕鬆鬆在Console中檢視參數傳遞的狀況。由於這隻js只有不到2K的大小(官方稱之為世界上最小的除錯工具),因此也不用擔心因為除錯功能而增加專案的負擔,放心加下去就對了。

延伸閱讀:

http://code.tutsplus.com/tutorials/debjs-the-tiniest-debugger-in-the-world–cms-21565

13 則留言: