網頁

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

 

以上

沒有留言:

張貼留言