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浏览器-调试模式开启，代表当前手机页面处于调试状态。如图：

  全部工做准备就绪，接下来可进入调试阶段。