星期六, 6月 09, 2012

jQuery 教學 - 如何除錯 - 工具篇

Photobucket


坊間有很多除錯工具,最常見也是大家最推崇的是,
隸屬在 Firefox 瀏覽器裡的一個老牌套件工具:「 Firebug」,



Photobucket


而一套好的理想的除錯工具,
無非是要一個可以告訴我們哪一行程式出錯,
運行中斷時可以看到相關數據當下的結果。

每家瀏覽器都有各家的除錯工具,大家都可以分別去試試看,
KT試到發此篇文章為止,KT仍深愛大師級推薦的「 Firebug」,
你不妨可以去玩玩看,好的除錯工具會讓你寫起程式如騰雲駕霧。
所以這邊KT就使用 Firebug 來偵錯、除錯給大家看。


所以若想跟著KT步驟做,
可能需要先安裝Firefox 和 Firebug的套件。



有些書,用訊息視窗(alert)來除錯,
讓KT不經睜大眼想問:「Are you serious ??? you're kidding right ? 」

訊息視窗是煩人的,你喜歡這樣的方式除錯嗎???


我們來看一下,發生在感動幼稚園小朋裡的一個除錯案例:

今天喬喬老師要收週六到台北木柵動物園的郊遊費用,
因為少子化的關係,全班共五人,每人費用100元,
所以總共會收到500元。
可是最後竟發現金額卻短少100元,
這時喬喬老師分別詢問,是否有哪一位小朋友,沒有付錢。
喬喬老師用甜美,傾國傾城的聲音,問a小朋友「你有付錢嗎?」
a小朋友,淚眼汪汪的看著老師說:「老師!我...有ㄈ...」,
分別又問了另外4個同學,同樣都得到相同的結果。

這時喬喬老師,只好請隔壁的花花老師,來幫忙這件事情,
花花老師,先大聲囔囔斥責喬喬老師的糊里糊塗,
然後像吃了炸藥式的詢問每個小朋友,最後仍無疾而終。

這時喬喬老師,只好無奈向上呈報,請示班主任,
班主任托著腮幫思考了一下,只好迫不得已,對小朋友使用隔離偵訊。

每個小朋友確實都有繳錢,
續 jQuery 教學 - 如何除錯 - 思想篇 所討論的,
若不知道問題點發生在哪,
對小朋友嚴刑酷打也是沒有意義的,
重點不是在有沒有繳錢這件事,
而是在每個小朋友繳了多少錢。

班主任列出小朋友繳錢的明細,喬喬老師才恍然大悟。

我們把這件事用程式來表達:

//分別將數據存至變數當中

var a =100; 
var b =1;
var c =99;
var d =100;
var e =100;
var sum=a+b+c+d+e;



我們分別想知道 a~e、 sum 等變數的值,

  • 第一種: alert 訊息視窗偵錯
alert("a="+ a + " b="+b +" c="+c+" d="+d+" e="+e+" sum="+sum);

Photobucket



  • 第二種: console.log 訊息視窗偵錯
 console.log("a=" + a + " b=" + b + " c=" + c + " d=" + d + " e=" + e + " sum=" + sum);

如果是用Firefox Firebug 要來查看 console打印出來的訊息,
在網頁畫面中按下右鍵,開啟右鍵選單,滑鼠點選使用「Firebug 觀看元素」

step1 :
Photobucket

step2 : 完成step1步驟後,預設下方將會出現Firebug 工具畫面,
            點選「主控台」=>「全部」
            即可以看到剛剛用console.log 打印出來的訊息。
            有趣的事,你可以在log 訊息右手邊看到藍色的字樣,
            說明是哪支程式的哪一行程執行此命令。
Photobucket

可是你會發現,KT說Firebug工具很迷人,迷人的點是什麼,
第一種和第二種方法,每家瀏覽器的除錯工具都可以辦到,
那為何我們要特別去安裝Firefox 什麼 Firebug。

別急,好戲才剛要上場,你會發現當你要去查看某變數,
我們並須事先在程式碼先安插相關程式碼,可是有時網頁就是在online上,
當下要除錯,我們不就先關閉網站或備份客戶,
那邊當下程式碼帶回公司研究研究,才有辦法除錯。

顯然上面除錯方式只能在開發程式時使用,真的上了線,就沒轍了。
Firebug迷人的地方,可以即時增加中斷點,查看當下變數。
以此例,我們可以用Firebug在想要查看的地方建立中斷點,
即可看到當下的變數,此次範例程式碼如下:

$(document).ready(function () {
    var a = 100;
    var b = 1;
    var c = 99;
    var d = 100;
    var e = 100;
    var sum = a + b + c + d + e;
    
    alert("a="+ a + " b="+b +" c="+c+" d="+d+" e="+e+" sum="+sum);
    console.log("a=" + a + " b=" + b + " c=" + c + " d=" + d + " e=" + e + " sum=" + sum);


});


  • 第三種: Firebug 即時建立中斷點
網頁載入後,開啟Firebug工具,切到Script標籤裡,
選擇你想偵錯運行的jQuery,
滑鼠點擊,建立新的中斷點。(再點擊一次,則會取消中斷點)
Photobucket

此時讓網頁重新更新,程式則會運轉到這裡被中斷,
我們並不需要去手動增加任何程式,則會自動列出當下的變數值。
Photobucket

迷人吧!!! 還有更正點的!!!

Firebug可以清楚點明出,來裡錯誤。

以總和這行程式碼為例,變數與變數相加,需有個 + 號,
若不小心漏打,如a+b,誤打成ab:
var sum = ab + c + d + e;
我們並未去定義ab參數,
此時Firebug也會超貼心告訴我們且說明哪支程式哪行錯誤:
Photobucket

豐富的網站,檔案與程式碼數量都非常可觀,
若不知道哪一支出錯,亂槍打鳥,
恐怕很難靠寫code這行來餬口飯吃。



這邊KT也是衷心的再一次推薦,
若開發jQuery 、JavaScript,
真的使用Firebug除錯不會讓你失望,
相信你也會愛上這好用的小工具。

更多有關Firebug 介紹說明可以參考官網: Firebug 官網


相關文章:
jQuery 教學目錄

0 意見 :

張貼留言

回覆意見時,麻煩輸入一下暱稱
(隨便取個名字也好~ ^_^)
好讓我方便回覆您的問題,
選擇「名稱/網址」輸入您的暱稱,
麻煩一下,謝謝大家。

關閉廣告 [X]