Remote Debug for Opera

如標題，Opera 這部份的功能與 Chrome 比較接近，但測試環境的準備比 Chrome 更方便，已經不需要類似 JDK、SDK 這些 Tools 了，請看以下的說明。

準備執行環境

二種裝置的環境分別如下，還需具備Wi-Fi環境：

PC

• Opera 12.02+

Mobile

• Opera for Mobile 12.1+

1. 已經提到 Wi-Fi 了表示測試不需要 USB 線(Chrome 及 Firefox 也可以採用無線測試但動作比較繁瑣)，因此 PC 及 Mobile 都須具備無線功能，目前 Mobile 應該都具有 Wi-Fi 連線的功能了。


2. 於 PC 下載 Opera 並安裝，一般文件都提到 Opera Remote Debug 的工具名稱為：Opera Dragonfly，因已經內建於 Opera Browser 了，不需另外安裝， Opera Dragonfly 目前版本為 1.1。


3. 安裝 Opera for Mobile 建議安裝最新版，wikipedia 有提到須要 Opera for Mobile，可是官方文件沒找到不能用 Opera Mini，有興趣的自行驗證。

Remote Debug for Opera Step by Step

1. PC 和 Mobile 連線同一個 Wi-Fi，於 PC DOS Command 輸入 ipconfig，可如下圖看到 PC 的 IP ： 192.168.2.117。





2. PC → Opera → Ctrl+Shift+I → Opera Dragonfly → 遠端除錯設定， Ctrl+Shift+I 是開啟/關閉 Opera Dragonfly 的快捷鍵，至於該從那裡點選來開啟 Opera Dragonfly 則找不到地方，所以以快捷鍵來開關；port 就照預設的 7001 接著點選套用，而右邊也有文字說明要執行的步驟。





套用後會顯示如下的畫面，正在等待遠端裝置，右邊也有文字說明遠端裝置的設定步驟，接下來也是照著說明步驟操作。




3. Mobile → Opera → 網址列輸入opera:debug → 輸入PC IP(第1點取得的 ip:192.168.2.117) → 點選連線，連線設定及連線成功畫面可參考下圖。








4. 第 3 點一連線成功， PC Opera 則會顯示類似下圖的畫面，除錯架構可以選擇要針對 Mobile Opera 上那個分頁進行 debug，而當我們於文件點選【地方資訊】，可看到 Mobile Opera 的 google 首頁的相對位置顯示反白。








5. PC → Opera Dragonfly → 工具程式 → 抓取螢幕截圖，可看到如下圖截取到手機的畫面，Opera Dragonfly 其他功能請參考 Opera 官網。

於此次測試第一次接觸 Opera ，就 Remote Debug 而言比較之下 Opera 有更多的便利性，就依需求各取所需吧。

相關設定可參考：
Opera Dragonfly
Opera Download
Opera Dragonfly documentation - Remote Debugging
網頁開發除蟲利器Opera Dragonfly 1.0邁入正式版