歐朋瀏覽器開發(fā)者工具(Opera Dragonfly)

Opera Dragonfly是Opera中的網(wǎng)頁開發(fā)者工具，類似于Firefox中的Firebug、IE下的IE WebDeveloper，Opera Dragonfly 是適用于 Opera 瀏覽器的跨設(shè)備、跨平臺(tái)的調(diào)試環(huán)境 - 調(diào)試 JavaScript、檢查和編輯 CSS 與 DOM，以及查看手機(jī)或計(jì)算機(jī)上的任何錯(cuò)誤。

可以從“菜單”->“網(wǎng)頁”->“開發(fā)者工具”->“Opera Dragonfly”將其激活，也可右鍵選擇“檢查元素”將其激活。

Opera Dragonfly加載失敗或未完全加載如何關(guān)閉其窗口：

從“菜單”->“網(wǎng)頁”->“開發(fā)者工具”->“Opera Dragonfly”可以將其關(guān)閉， 或使用Ctrl+Shift+I快捷鍵關(guān)閉Opera Dragonfly檢查元素窗口。
Opera Dragonfly默認(rèn)是在線版的，但可以安裝使用離線版，從而能離線檢查元素。

Opera Dragonfly離線版安裝方法：

1. 在本頁下載Opera Dragonfly源碼壓縮包，Opera-Dragonfly.zip。
2. 解壓到D:\盤。
3. 在Opera地址欄輸入opera:config打開首選項(xiàng)編輯器，將Developer Tools下的Developer Tools URL由改為file://localhost/D:/Opera-Dragonfly/client-en.xml，“保存”即可。

如果想恢復(fù)使用在線版，可點(diǎn)擊Developer Tools URL后的“默認(rèn)”按鈕，從而恢復(fù)回默認(rèn)值https://dragonfly.opera.com/app/
Opera Dragonfly在線版是可以自動(dòng)更新，無需自己手動(dòng)更新，但由于訪問網(wǎng)絡(luò)上的的文件，所以加載速度較慢，離線版需要自己手動(dòng)下載更新安裝新版本，但由于訪問的是本地文件，所以加載速度較快。

調(diào)試方法

主要有兩種調(diào)試方法：
本機(jī)：Scope，代理和調(diào)試器運(yùn)行在同一個(gè) Opera 實(shí)例中。
遠(yuǎn)程：Scope 和調(diào)試器運(yùn)行在兩個(gè)不同的 Opera 實(shí)例上，比如，兩個(gè)不同的設(shè)備上。而代理可以運(yùn)行在兩實(shí)例之一，也可以在另外的獨(dú)立計(jì)算機(jī)上運(yùn)行。

本機(jī)
這是最常用和最典型的方法。開發(fā)者們正在開發(fā)網(wǎng)絡(luò)應(yīng)用，它可以正常運(yùn)行于 Opera 瀏覽器。該調(diào)試器運(yùn)行于相同實(shí)例中，顯示在一個(gè)獨(dú)立窗口或面板。

在這種情況下，調(diào)試主機(jī)，代理和客戶端運(yùn)行于同一個(gè)瀏覽器實(shí)例。Opera 選擇一個(gè)隨機(jī)端口運(yùn)行代理，Scope 模塊和調(diào)試器會(huì)自動(dòng)連接它。

遠(yuǎn)程
這個(gè)方法的一種應(yīng)用是可以調(diào)試手機(jī)上的網(wǎng)頁或應(yīng)用。手機(jī)一般屏幕很小，開發(fā)也很受限制，因此用桌面電腦來調(diào)試是一種方便的做法。
另一種可能性是在同一個(gè)設(shè)備上的一個(gè) Opera 實(shí)例調(diào)試另一個(gè) Opera 實(shí)例，這在調(diào)試實(shí)例瀕臨崩潰的時(shí)候非常有用。

遠(yuǎn)程調(diào)試方法可以分解為兩種用法：
代理在兩實(shí)例之一運(yùn)行。
代理獨(dú)立于實(shí)例運(yùn)行，比如運(yùn)行在公共服務(wù)器上。

第二種方法可以運(yùn)用在，被調(diào)試實(shí)例和調(diào)試器隔防火墻運(yùn)行的情況。

Opera Dragonfly 更新日志：

Opera Dragonfly 1.1在經(jīng)過6個(gè) RC 版本后，修復(fù)了大概 200 個(gè) bug，終于發(fā)布了正式版。除了修 bug，當(dāng)然有不少改進(jìn)。
Opera Dragonfly 1.1，相較于 1.0 的改進(jìn)和新增功能如下：

DOM 和樣式查看器

查找功能支持通過正則表達(dá)式、CSS 選擇器、XPath 和普通文本匹配實(shí)現(xiàn)

CSS 查看器中增加鏈接，可以追溯到定義該 CSS 聲明的源文件

可顯示對(duì)偽類和偽元素的聲明

可顯示 SVG 表現(xiàn)屬性

Javascript 調(diào)試器

查找功能改進(jìn)：支持正則表達(dá)式；可選擇是否忽略大小寫；在所有 JS 中查找時(shí)可選擇是否忽略注入式 JS（Opera本身的 Browser.js 、User JS 、擴(kuò)展 JS）

存儲(chǔ)查看器

改進(jìn)本地存儲(chǔ)、進(jìn)程存儲(chǔ)和 Widget 首選項(xiàng)查看器的用戶介面，和 1.0 版本的 Cookie 查看器介面風(fēng)格協(xié)調(diào)一致。

控制臺(tái)

為本地對(duì)象新增自動(dòng)完成功能

內(nèi)置的可擴(kuò)展對(duì)象

控制臺(tái)高亮顯示警告、信息、錯(cuò)誤

錯(cuò)誤日志

重新設(shè)計(jì)了用戶介面，比原有設(shè)計(jì)更節(jié)約屏幕面積

錯(cuò)誤按資源類型分類顯示，不再使用以往的按嚴(yán)重級(jí)別分類的顯示方式

每行錯(cuò)誤后面增加了連接，能追溯對(duì)應(yīng)代碼的行號(hào)

“查找”更名為“過濾器”(…..= =||

移除了 console.* 入口。不過提供了保留此功能的選項(xiàng)

不須打開 Dragonfly 也能調(diào)出錯(cuò)誤日志（不過，要等到 Opera 12 才有效）

或許你習(xí)慣使用 Opera 原生的錯(cuò)誤控制臺(tái)，因?yàn)樗查g即可啟動(dòng)，非�？旖�。而等到 Opera 12 發(fā)布后，或許你會(huì)對(duì) Opera Dragonfly 的錯(cuò)誤日志更有興趣，因?yàn)榈綍r(shí)不須打開 Dragonfly 也能調(diào)出錯(cuò)誤日志了。

網(wǎng)絡(luò)查看器

可嗅探通過 POST 方式發(fā)送的數(shù)據(jù)（終于……←_←

性能優(yōu)化

資源查看器

點(diǎn)擊行號(hào)即直達(dá)錯(cuò)誤日志和 CSS 查看器

添加查找功能

工具箱

新增 2D 屏幕尺子。你可以先使用 Dragonfly 的截圖功能，然后在上面劃出一個(gè)矩形區(qū)域，就能輕易得到其長(zhǎng)和寬的像素值，即使縮放比不是100%也不須你費(fèi)神換算。