前面介紹過Firefox與IE的開發者工具後，接下來介紹另一個比較少人會使用的瀏覽器「Opera」，
雖然說Opera列名在五個主要的瀏覽器中，但Opera卻是最少人使用的一個，
其實Opera的執行速度與其他效能的表現上卻是一點也不遜色，比起其他比較多人使用的瀏覽器更是相當出色。
接下來這一篇就簡單的介紹Opera的開發者工具。
Opera
目前最新版本：11.60
下載位置：http://www.opera.com/download/
Opera的開發者工具「Opera Dragonfly」
這個名稱超有個性的，首先來看要怎麼把它給叫出來。
Dragonfly … 蜻蜓
方法一：選單
首先要先讓選單列顯示出來
接者瀏覽器上方就會出現「選單列」
上方工具列依序點選「檢視」→「研發工具」→「Opera Dragonfly」
方法二：使用快速鍵
在Opera瀏覽器中使用快速鍵「CTRL + SHIFT + I」就可以把Opera Dragonfly給叫出來。
方法三：將Opera Dragonfly的功能鍵固定在功能列上
一開始預設的Opera瀏覽器是不會顯示「主工具列」，所以要改變設定讓主功能列顯示出來，
主工具列
接著在主工具列的右方空白處點下滑鼠右鍵，然後點選「自訂」→「外貌」
點選後會出現一個視窗，再去點選「按鈕」的頁籤
到了「按鈕」的頁籤後，接著選擇下方的「瀏覽器畫面」
這時候就可以看到右方的許多按鈕中有個「Opera Dragonfly」
然後我們就把下方視窗的「Opera Dragonfly」的按鈕給拖曳到上方的主工具列中
如果你覺得不想要出現主功能列，像要換個地方的話，其實也可以，像我就會把 Opera Dragonfly 給放到下方的位置，
網址列以及搜尋列的右方
Opera Dragonfly
主畫面
除了固定在Opera的下方外，也可以切換為獨立視窗顯示
依序來看Opera Dragonfly的功能選項
文件
觀看頁面的HTML原始碼以及使用的樣式內容，並可以在修改樣式或原始碼內容的檢測
如果是要檢查頁面上的任一元素，則可以在頁面的元素上點選滑鼠右鍵並且選擇「檢查元件」，
就會開啟Dragonfly的文件並顯示元素於原始碼的位置，
Script
一開始如果沒有載入頁面的Script，可以重新整理頁面或是點選畫面中的重整按鈕，重整後讓script載入以用來偵錯。
在這裡可以對script下中斷點，新增監看式等
下圖為實際進行偵錯的畫面
網路
用來監看頁面上各個HTTP Request的狀況
點選某一個項目觀察細節
細節內容觀看後，可以點選左上方的左鍵頭Button就可以關閉細節內容
資源檔
觀察此頁面所使用到的所有資源內容
儲存區
觀察以及管理頁面的儲存內容，如Cookie等
Cookie的管理功能
新增Cookie
編輯Cookie內容
刪除Cookie
錯誤
工具程式
Opera Dragonfly有提供一個螢幕截圖的工具，可以擷取目前頁面的畫面
主控台
在主控台中可以下Javascript的指令來執行（不過可惜的是無法進行多行指令的輸入）
設定
Opera Dragonfly的設定可以讓我們自定這個介面的各種顯示與功能的調整，
一般
文件
Script
錯誤記錄
鍵盤快速鍵
以上就簡單介紹有關Opera的開發者工具「Opera Dragonfly」，各家瀏覽器的開發者工具雖然操作介面上有所不同，
但是實際使用時都是大同小異的，尤其是Script的偵錯功能，我必須說Opera Dragonfly還蠻好用的，
多認識一種瀏覽器的開發者工具使用，讓我們所做的網站多增加一種環境的測試，
讓使用各種不同瀏覽器的使用者可以正確無誤的操作我們苦心盡力所設計的網站功能。
以上
沒有留言:
張貼留言