2011.03.06 13:46

Opera Dragonfly ,用瀏覽器抓蟲蟲

ADVERTISEMENT

隨著網路技術的發展與存取網頁的裝置日益多元,開發網頁的任務也變得更複雜。現在大家都講究網路標準,但不是每個人天生都能寫出符合網路標準的網頁,所以一定得靠開發工具來除錯,它要可以因應JavaScript、HTML網頁、DOM等等的調整需求,最好還能內建在瀏覽器裡,這裡筆者推薦Opera Dragonfly。

▲要啟動Opera Dragonfly先進入「工具(Tools)>進階(Advanced)>Opera Dragonfly」。此圖為附屬模式的Opera Dragonfly。

ADVERTISEMENT

所見即所得的除錯視窗

使用Opera Dragonfly進行除錯可以直接看見除錯的對象,它能在網頁中被明顯標示出來。Opera Dragonfly使用2種模式來除錯,首先是附屬模式,直接在瀏覽器內啟動,也就是讓除錯視窗出現在瀏覽器頁面的正下方;另一個是分離模式,讓Opera Dragonfly出現在全新的頁面。

在介紹不同的功能前,再告訴大家1個方便好用的密技:Opera Dragonfly可以同時在不同的網頁中除錯。這樣一來就可以讓程式人員多工處理,減少作業時間。

ADVERTISEMENT

▲現在使用4個頁籤開4個頁面,Opera Dragonfly就會同時幫這4個頁面除錯。

常見的入門除錯工具

其實Opera Dragonfly可以用的功能非常多,包括:JavaScript除錯(JavaScript debugger)、DOM檢查器(DOM inspector)、CSS檢查器(CSS inspector)、命令列介面(Command Line interface)、錯誤控制台 (Error Console)、、網路分析器(Network analyzer)、少量資料(Cookie)/本機儲存(local storage)與顏色選項(Colour picker)等。

我們這次先介紹JavaScript除錯、DOM檢查器、CSS檢查器、以及錯誤控制台這些入門功能:

ADVERTISEMENT

1.DOM檢查器

DOM是文件物件模型(Document Object Model,簡稱DOM),是W3C組織推薦的網頁處理介面,也就是HTML代碼與瀏覽器互動的一個應用程式介面。DOM的除錯功能也有不同的選項,方便程式人員使用,由左至右依序為:

一、展開DOM樹(expand DOM tree)
二、輸出DOM樹的代碼(export current DOM view)
三、點擊頁面的不同部位時,可以在Opera Dragonfly裡顯示其DOM代碼。
四、點擊代碼時,同時在網頁標示被除錯的對象。
五、自動更新DOM樹。舉例來說,您用JavaScript更新DOM樹,如removeChild。這個選項會讓Opera Dragonfly自動更新DOM樹。

ADVERTISEMENT

▲選擇DOM標籤後,便可以直接在框裡修改內容,而且還可以馬上看到實際的改變。

2.CSS檢查器

在Opera Dragonfly頁面下方有兩個分頁,一個是DOM,另一個則是stylesheet。這裡的stylesheet是頁面指定的stylesheet文件,右邊則是當時DOM所啟動的stylesheet,更改右邊的style會將結果直接呈現在網頁裡。

▲使用CSS編輯功能可編輯現有屬性和值。

3.JavaScript除錯

很多網頁都會跑JavaScript,有一些可能是自己寫,也有一些是第三方程式,如Google Analytics。運用Scripts標籤上的選項,就可以看到該頁面使用的各種JavaScript。

▲Opera Dragonfly可以讓您設置中斷點(breakpoint)。

4.錯誤控制台
最後一個是錯誤控制台,它會直接以列表顯示CSS和JavaScript的錯誤。

▲錯誤控制台可以查看、過濾與記錄腳本中的任何錯誤,並指向發生的位置。

總而言之,透過Opera Dragonfly來除錯,程式人員就能節省許多時間,同時讓網頁符合W3C規範標準。如果有興趣知道更詳細的資訊,可以參考延伸閱讀。

延伸閱讀:
[1]Opera Dragonfly底層架構說明:
[2]Opera Dragonfly部落格:

ADVERTISEMENT