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瀏覽器-調試模式開啟,表明當前手機頁面處於調試狀態。如圖:

    所有工作准備就緒,接下來可進入調試階段。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM