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