2011年10月1日 星期六

Firefox 開發前端語言時的偵錯工具 Firebug 以及好用的套件


其實一直很想寫下這一篇,但是又發現到其實很多人都會用Firefox + Firebug 的組核對前端網頁進行偵錯,

應該說,從事網頁設計、開發的從業人員都應該會用才對,

但是… 在我目前工作的公司裡,還真的有很多人不用、不會用、甚至是不知道有這樣的工具。

 

更有些人對於前端語言的偵錯方式還是使用那一套 alert() 大法,

就是在程式之中要偵錯的地方就是狂下 alert(),把要顯示的訊息給alert出來,

這方法不能說不好,但是偵錯的時候就去改變原始碼,然後修改完再去一一的把alert給移除,

萬一遺漏了一些的話,那麼就會看到上線的網頁會有些地方就出現不該出現的alert訊息視窗啦,使用者就認為這是BUG!

 

Firebug是個相當優異的前端偵錯工具,而且還有很多可以掛載在上面的套件,整合在Firebug之中,讓偵錯更加方便,

所以本篇不會是一篇教你如何使用Firebug來偵錯的Step教學,而是一篇介紹如何應用Firebug與Firebug外掛讓偵錯更加便利。

會介紹以下幾個Firebug的外掛工具:

FireQuery

FireRainbow

FireCookie

Firebug AutoCompleter



Firebug 1.8.3

https://addons.mozilla.org/zh-TW/firefox/addon/firebug/?src=cb-dl-mostpopular

Firebug是一個與Firefox整合的工具,當你在開發網頁時,可以幫助你進行網頁的偵錯,也可以即時編輯CSS、HTML與JavaScript。

尤其是在JavaScript的偵錯與測試上,是其他瀏覽器的開發者工具所無法比擬的。

 

安裝完成之後,你可以有兩種方式來啟用Firebug,

F12, 開啟、隱藏Firebug

image

Ctrl + F12 , 開啟Firebug到新視窗

image

主控台

在上圖中,Firebug的最下方為可以輸入指令的命令列,

而右下角的紅色圖示,按下去之後,可以讓命令列顯示在Firebug主控台的右方,

image

命令列顯示在Firebug右方有個好處,那就是我們可以一次輸入多行的JavaScript,最後再一次執行,

而且執行完之後還可以繼續編輯、修改之後再做一次執行,這是其他瀏覽器的開發者工具所沒有的方便功能,

我開發前端程式時,大多數都會先在Firebug主控台的命令列裡去反覆編輯該如何寫,直到功能差不多的時候再把程式碼複製起來

例如:

我可以寫一大段的JavaScript程式後再去執行,而且執行後,原來在命令列的程式碼還是一樣可以保留,

而執行結果可以在主控台的左方區塊顯示。

image

這邊跟各位說一下,要讓執行結果可以顯示到左邊的結果顯示區,可以使用「console.log()」,

這個語法也可以直接寫在你正式的JavaScript程式中,在網頁上並不會顯示出來,而是只會顯示在瀏覽器的Console之中,

務必習慣使用 console.log() 讓測試結果輸出在Console之中,而不要使用 alert() 來讓測試訊息作用於網頁上。

 

另外在主控台可以看到網頁中HttpRequert的歷程與內容:

image

image

 

HTML

在HTML頁籤中除了可以看到HTML原始碼外,也可以針對每個element所使用的樣式都可以完整顯示,

image

或是我們也可以在網頁中,選定一個element然後按下滑鼠右鍵,選擇「觀察元素

image

按下之後,就會顯示Firebug的HTML頁籤,並且直接顯示該element於原始碼的位置,

image

此外我們可以對HTML原始碼、CSS樣式表進行編輯,馬上就可以在網頁上看到修改後的結果,以作為實際修改的參考,

注意!在Firebug對原始碼進行任何的修改都不會對真正的原始碼產生影響,在Firebug之中就只是測試而已。

image

image

 

CSS

顯示目前網頁所載入及使用的樣式表內容,

image

image

 

Script

這個對於JavaScript的偵錯是相當重要的,在這裡可以針對網頁使用的JavaScript進行偵錯,下中斷點、監看變數、查看堆疊等

image

image

下中斷點的方式就如同在Visual Studio的方式一樣,一樣都是在程式行數的地方點一下就可以,

加入的中斷點後,可以在右方的「中斷點」頁籤中查看有下了那些的中斷點,

如果偵錯時暫時不想停在某個中斷點,又不想去移除掉時,可以把該中斷點前方的Checkbox給取消勾選,

image

進行偵錯並執行到中斷點,

F10, 逐步執行

F11, 進入細節之中執行

Shift + F11 , 跳出細節

image

可以在「監看」頁籤之中即時看到目前的資料,而在左邊的JavaScript中,滑鼠游標移到變數上也可以即時看到目前的變數內容,

image

也可以即時加入監看式

image

也可以對中斷點去下條件是,尤其是在迴圈處理時,我們可以編輯中段條件,當迴圈處理時如果符合條件就會進入中斷,

不然迴圈有上百上千時,如果不對迴圈下中斷條件,那就要一直手動執行這個迴圈直到進入我們要的條件才開始偵錯,太辛苦了

image

 

DOM

如果有需要了解網頁的DOM結構時,可以查看DOM頁籤的內容

image

 

網路

目前網頁所有的HttpRequest的行為記錄,由此可以看出哪個檔案或是哪個步驟花費的時間比較長,

image

點開項目前面的加號圖示,就可以查看這一個HttpRequest的詳細內容

image

對於AJAX的HttpRequest也是一樣忠實的記錄下來,

image

 

Firebug就介紹到這裡。

 

延伸閱讀

Firebug -  Web Development Evolved.

 


FireQuery

https://addons.mozilla.org/zh-TW/firefox/addon/firequery/

http://firequery.binaryage.com/

我將這個套件列在Firebug外掛中的第一個,這是因為jQuery已經是大部分前端語言的優先採用的JavaScript Framework,

FireQuery可以讓我們在Firebug的HTML頁籤中直接看到網頁裡的element有綁定了什麼樣的事件,

image

並且可以往下追查綁定事件式作用了那些的方法。

點擊「Object { click=[1] }

image

再點擊「[Object { type="click", guid=29, handler=function(), 更多...}]

image

點擊「function()」

image

最後就可以看到這個element於click事件所綁定的function

image

 

另外也可以在主控台的命令列中,以jQuery的選擇方式取出一個element,

image

在左邊的區塊中,滑鼠游標移到剛剛顯示的結果上,除了立即標示網頁的element外也會顯示此物件的DOM Path,

image

如果是直接點擊的話,就會立即移到HTML中

image

 

另外還有一個功能「jQuerify」,可以偵測網頁所使用的jQuery的版本為何?

image

按下「jQuerify」之後,會在網頁中間顯示訊息:

image

 

另外FireQuery也支援 JQuery Lint ,可以將jQuery Lint 所提出的jQuery寫法驗證建議給顯示出來,

jQuery Lint 提供的訊息頗為詳盡,除了簡單錯誤報告外,還提供修改建議、問題代碼、甚至相關的 method signatures 。

http://james.padolsey.com/javascript/jquery-lint/

https://github.com/jamespadolsey/jQuery-Lint

 


FireRainbow

https://addons.mozilla.org/zh-TW/firefox/addon/firerainbow/

Javascript syntax highlighting for Firebug

在上面的Firebug的JavaScript頁籤中所看到的JavaScript原始法都是黑壓壓的文字,並沒有如同在Visual Studio 中的編輯樣式,

會將變數、方法等以不同的顏色標示,以清楚區分、方便閱讀,而FireRainbow就是做這一個工作的套件。

以下是尚未套用FireRainbow的JavaScript內容檢視:

image

而以下則是使用了FireRainbow的JavaScript內容檢視:

image

是不是賞心悅目了許多呢~

 


FireCookie

https://addons.mozilla.org/zh-TW/firefox/addon/firecookie/

Firecookie is an extension for Firebug that makes possible to view and manage cookies in your browser

  • 可添加、刪除已有的獲釋查看瀏覽器的Cookie。
  • 可防止重要的Cookie訊息被別人攻擊、盜取。
  • 隨時可新建Cookie、修改Cookie值或是清理Cookie等功能。
  • 在同一個域中,都可隨時來查看該Cookie。
  • 瀏覽器會把Cookie儲存在硬碟,讓您下次再開啟瀏覽器,依然可以使用您當初設定的。

想想以前我們要看網頁中的Cookie要如何查閱呢?我必須說有夠麻煩的,所以FireCookie就是讓你方便的好套件。

安裝之後在Firebug就會增加「Cookies」的頁籤,裡面就可以看到Cookies的內容

image

不只有顯示Cookies而已,也可以對Cookies進行管理,建立、移除、匯出等

image

其他的功能就不一一介紹。

 


Firebug AutoCompleter

https://addons.mozilla.org/zh-TW/firefox/addon/firebug-autocompleter/

Firebug command line autocomplete.

一開始Firebug 主控台命令列的介紹中有說到,我們可以在命令列之中去輸入JavaScript的程式,

但是一定有很多人跟我一樣,對於那麼多的函式是很少會把它給完全背熟,

在Visual Studio裡面不管是寫C#程式還是寫JavaScript程式,反正有IntelliSense的功能,可以使用提示,

但是在Firebug的主控台命令列裡就沒有這種「福利」了,

好在Firebug Autocompleter就是解決了我們這種背不熟函式的人的痛苦,

 

下圖,這表示已有安裝Firebug Autocompleter。

image

安裝完成之後,馬上進入到Firebug的主控台命列中去瞧瞧,先隨便輸入些文字,然後…

就開始出現IntelliSence的提示

image

方法也有顯示

image

就算是我們自己寫的function也可以提供IntelliSense

image

連jQuery提供的方法也是可以顯示IntelliSense

image

是不是很方便又很好用呢?


當然掛載在Firebug下的套件還有很多好用的,我只是沒有一一列出來而已,

我這邊所介紹的四種套件,是我目前在開發上一定要具備的,尤其是「FireQuery」以及「Firebug Autocompleter」,

除了這四個介紹的套件外,其他的好用套件就給各位去發掘啦!

 

延伸閱讀:

Firebug Add-ons

 

13 Must-Have Add-ons To Strengthen Firebug

 

以上

沒有留言:

張貼留言

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。

最近的留言