Opera Dragonfly ，用瀏覽器抓蟲蟲

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

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

所見即所得的除錯視窗

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

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

▲現在使用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檢查器、以及錯誤控制台這些入門功能：

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樹。

▲選擇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部落格：