UC瀏覽器開發者版調試手機頁面

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瀏覽器-調試模式開啓，代表當前手機頁面處於調試狀態。如圖：

  全部工做準備就緒，接下來可進入調試階段。