超輕量化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來除錯的窘境 ＸＤ。

使用deb.js

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



接下來在網頁開頭加入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的收折效果。



另外，我們還可以為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了。



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

延伸閱讀：

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