1 關於RI
目前,在手機上使用瀏覽器訪問網頁,無法便捷地進行網頁語言調試。手機屏幕相對較小且操作不便,直接在手機上進行網頁數據調試不太現實。
因此,我們使用技術將手機網頁調試信息分離,實現一種能在大屏幕、高配置PC上來調試小屏幕、低配置的手機瀏覽器訪問的網頁的開發工具——RemoteInspector(簡稱RI)。
1.1主要功能
Android平台UC瀏覽器開發者版,主要支持以下功能:
- DOM查看和修改
- JavaScript調試、CSS調試
- 網絡狀態查看
- 資源文件查看
- Console控制台
2 准備工作
2.1 手機端
進入UC官方網站開發者中心(網站地址),下載Android平台的UC瀏覽器開發者版,安裝到手機中。
2.2 PC端
PC機一台,並在PC上安裝Chrome或Safari(推薦使用Chrome)。支持Chrome15–Chrome21,以及Safari5.1.4以上版本。
下載ADB工具到PC中。
2.3 連接手機與PC
Android平台UC瀏覽器開發者版,遠程調試支持USB連接、Wi-Fi連接兩種模式。MAC平台請參考:UC瀏覽器開發者版使用手冊(Android平台).pdf
-
Wi-Fi連接模式
Wi-Fi模式下,保證手機與PC處於同一個無線網段即可。
-
USB連接模式
USB連接模式需要搭建AndroidSDK開發環境或安裝adb工具。
//附Windows操作系統上的adb安裝參考 1)在PC上,通過網絡下載安裝豌豆莢(Android手機助手); 2)在手機上打開USB調試模式: 設置>應用程序>開發>USB調試
3)連接手機與PC,若PC無手機驅動,豌豆莢會自動下載驅動並安裝; 4)將手機與PC連接,能被豌豆莢識別則為正常連接 5)將adb_tool.zip解壓到C:\WINDOWS\system32目錄下 6)開始>運行>輸入cmd.exe進入Windows命令提示符窗口,輸入adb, 如果無錯誤提示,並能夠看到”AndroidDebugBridgeversion1.0.26”的提示,則表明adb安裝成功
搭建好AndroidSDK開發環境或安裝好adb工具后,通過adb命令進行端口映射。
在Windows命令提示符窗口(cmd.exe)運行:adbforwardtcp:9998tcp:9998
3 調試方式
在手機上啟動UC瀏覽器開發者版,並打開需要調試的頁面。在PC上打開Chrome或Safari
-
若是Wi-Fi連接模式,則在地址欄輸入:手機IP+:9998
例,手機IP為192.168.112.244,則輸入192.168.112.244:9998。此時手機端的UC瀏覽器開發者版會彈出對話框,如下:
選擇確定,允許調試。
-
若是USB連接模式,則在地址欄輸入:http://localhost:9998
成功訪問該網址后,即可看到UC瀏覽器開發者版已打開索引頁面:
接下來,點擊任一需要調試的頁面即可進行調試。調試方法與PC上Chrome或Safari開發者工具的調試方法類似。以UC產品下載站為例,點擊進入調試頁面:
當UC瀏覽器開發者版的某個頁面被遠端瀏覽器調試時,系統通知欄會顯示扳手圖標,提示UC瀏覽器-調試模式開啟,表明當前手機頁面處於調試狀態。如圖:
所有工作准備就緒,接下來可進入調試階段。