2011年12月24日 星期六

各主要瀏覽器的開發者工具( Developer Tool ) Part.3 - Opera


前面介紹過Firefox與IE的開發者工具後,接下來介紹另一個比較少人會使用的瀏覽器「Opera」,

雖然說Opera列名在五個主要的瀏覽器中,但Opera卻是最少人使用的一個,

其實Opera的執行速度與其他效能的表現上卻是一點也不遜色,比起其他比較多人使用的瀏覽器更是相當出色。

接下來這一篇就簡單的介紹Opera的開發者工具。


 

Opera

目前最新版本:11.60

下載位置:http://www.opera.com/download/

SNAGHTML4468f88

 

Opera的開發者工具「Opera Dragonfly」

這個名稱超有個性的,首先來看要怎麼把它給叫出來。

Dragonfly … 蜻蜓

 

方法一:選單

首先要先讓選單列顯示出來

image

接者瀏覽器上方就會出現「選單列」

image

上方工具列依序點選「檢視」→「研發工具」→「Opera Dragonfly」

image

 

方法二:使用快速鍵

在Opera瀏覽器中使用快速鍵「CTRL + SHIFT + I」就可以把Opera Dragonfly給叫出來。

 

方法三:將Opera Dragonfly的功能鍵固定在功能列上

一開始預設的Opera瀏覽器是不會顯示「主工具列」,所以要改變設定讓主功能列顯示出來,

image

主工具列

image

接著在主工具列的右方空白處點下滑鼠右鍵,然後點選「自訂」→「外貌」

image

點選後會出現一個視窗,再去點選「按鈕」的頁籤

image

到了「按鈕」的頁籤後,接著選擇下方的「瀏覽器畫面」

SNAGHTML458c548

這時候就可以看到右方的許多按鈕中有個「Opera Dragonfly」

SNAGHTML459bbc6

然後我們就把下方視窗的「Opera Dragonfly」的按鈕給拖曳到上方的主工具列中

image

如果你覺得不想要出現主功能列,像要換個地方的話,其實也可以,像我就會把 Opera Dragonfly 給放到下方的位置,

網址列以及搜尋列的右方

SNAGHTML4653430

 

Opera Dragonfly

主畫面

image

除了固定在Opera的下方外,也可以切換為獨立視窗顯示

SNAGHTML4686fc9

 

依序來看Opera Dragonfly的功能選項

image

 

文件

觀看頁面的HTML原始碼以及使用的樣式內容,並可以在修改樣式或原始碼內容的檢測

SNAGHTML46cbc43

如果是要檢查頁面上的任一元素,則可以在頁面的元素上點選滑鼠右鍵並且選擇「檢查元件」,

就會開啟Dragonfly的文件並顯示元素於原始碼的位置,

image

image

 

Script

一開始如果沒有載入頁面的Script,可以重新整理頁面或是點選畫面中的重整按鈕,重整後讓script載入以用來偵錯。

SNAGHTML47381a4

在這裡可以對script下中斷點,新增監看式等

SNAGHTML476290a

下圖為實際進行偵錯的畫面

SNAGHTML477e99a

 

網路

用來監看頁面上各個HTTP Request的狀況

SNAGHTML4793cc8

點選某一個項目觀察細節

SNAGHTML47adc32

細節內容觀看後,可以點選左上方的左鍵頭Button就可以關閉細節內容

image

 

資源檔

觀察此頁面所使用到的所有資源內容

SNAGHTML47d803e

 

儲存區

觀察以及管理頁面的儲存內容,如Cookie等

SNAGHTML489ae4f 

Cookie的管理功能

新增Cookie

SNAGHTML4b9faab

編輯Cookie內容

image

刪除Cookie

image

 

錯誤

SNAGHTML4bc4b69

 

工具程式

Opera Dragonfly有提供一個螢幕截圖的工具,可以擷取目前頁面的畫面

SNAGHTML4bcd071

SNAGHTML4be2525

 

主控台

SNAGHTML4befcbe

在主控台中可以下Javascript的指令來執行(不過可惜的是無法進行多行指令的輸入)

image

 

設定

Opera Dragonfly的設定可以讓我們自定這個介面的各種顯示與功能的調整,

image

一般

image

文件

image

Script

image

錯誤記錄

image

鍵盤快速鍵

image

 

以上就簡單介紹有關Opera的開發者工具「Opera Dragonfly」,各家瀏覽器的開發者工具雖然操作介面上有所不同,

但是實際使用時都是大同小異的,尤其是Script的偵錯功能,我必須說Opera Dragonfly還蠻好用的,

多認識一種瀏覽器的開發者工具使用,讓我們所做的網站多增加一種環境的測試,

讓使用各種不同瀏覽器的使用者可以正確無誤的操作我們苦心盡力所設計的網站功能。

 

以上

沒有留言:

張貼留言

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。

最近的留言