• uc 调试


    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:WINDOWSsystem32目录下
        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浏览器-调试模式开启,表明当前手机页面处于调试状态。如图:

      所有工作准备就绪,接下来可进入调试阶段。

    更多内容请参考UC浏览器开发者版使用手册(Android平台).pdf

    相关下载

  • 相关阅读:
    Visual Studio 存在版本之间冲突
    Failed to load resoure:the serve responded with a status of 405 (Method Not Allowed)
    Excel 导入解析数据 NPOIExcelHelper
    WIN10 SERVICES -- 部署IIS
    高德地图API-搜索提示并定位到位置,卫星地图和标准地图的切换
    BIMFCE选择全量绘制
    JS中如何获取当前日期,并与输入日期作比较
    html中input标签放入小图标
    div跟随浏览器大小而改变
    vue-amap接入高德地图示例
  • 原文地址:https://www.cnblogs.com/yelongsan/p/7358941.html
Copyright © 2020-2023  润新知