相關文章

Dec07d5e8cc4513abc56312e1cafd3e3 隨著網路技術的發展與存取網頁的裝置日益多元,開發網頁的任務也變得更複雜。現在大家都講究網路標準,但不是每個人天生都能寫出符合網路標準的網頁,所以一定得靠開發工具來除錯,它要可以因應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底層架構說明:http://dev.opera.com/articles/view/opera-dragonfly-architecture/
[2]Opera Dragonfly部落格:http://my.opera.com/dragonfly

使用 Facebook 留言

A1db58f4a748807e50699e47645feac9?size=48&default=wavatar
2.  pinkdawn (發表於 2011年3月06日 23:21)
不知小编知道不知道 ff有个插件叫 firebug.。

IE左下角有个东西叫“页面有错误”

chrome右键有个东西叫“查看此元素”
B699c0a3550e77351051a14378af6df9?size=48&default=wavatar
3.  t7yang (發表於 2011年3月06日 23:36)
這篇是子斌三月來台演講的前奏嗎 (≧▽≦)

可惜三月的沒有一場在交大 〒ˍ〒

Dragonfly 確實很強大 推
9635a29f21433f89f91653517b32358c?size=48&default=wavatar
5.  阿伯 (發表於 2011年3月07日 10:23)
Webkit 系列瀏覽器 (Safari、Chrome) 都有內建 debugger

Firefox 本身有簡易型的,但 firebug 最好。

Internet Explorer 的工具真的很蝦

發表回應

謹慎發言,尊重彼此。按此展開留言規則