uc浏览器开发者版使用手册(android平台word)

admin管理员组

文章数量:1533099

2023年12月24日发(作者：)

UC浏览器开发者版

（Android平台）

目 录

目 录......................................................................................................................................................................................... - 1 -

1

关于RI ............................................................................................................................. -

2

-

1.1 主要功能 ....................................................................................................................... - 2 -

2

准备工作 .......................................................................................................................... -

3

-

2.1 手机端........................................................................................................................... - 3 -

2.2 PC端 ............................................................................................................................. - 3 -

2.3 连接手机与PC .............................................................................................................. - 3 -

2.3.1 Wi-Fi连接模式 .................................................................................................................................................. - 3 -

2.3.2 USB连接模式 .................................................................................................................................................... - 3 -

2.3.3 针对MAC上的调试使用方法......................................................................................................................... - 4 -

3

调试方式 .......................................................................................................................... -

7

-

4

调试面板 ........................................................................................................................ -

10

-

4.1 元素面板(Elements Panel) ............................................................................................. - 10 -

4.1.1 高亮显示页面元素.......................................................................................................................................... - 10 -

4.1.2 查看选中元素的HTML代码 ........................................................................................................................ - 12 -

4.1.3 修改原页面的HTML代码 ............................................................................................................................ - 14 -

4.2 资源面板(Source Panel) ................................................................................................ - 15 -

4.3 网络面板(Network Panel) .............................................................................................. - 16 -

4.4 脚本面板(Source Panel) ................................................................................................ - 17 -

4.5 控制台(Console)........................................................................................................... - 18 -

- 1 -

1 关于RI

目前，在手机上使用浏览器访问网页，无法便捷地进行网页语言调试。手机屏幕相对较小且操作不便，直接在手机上进行网页数据调试不太现实。

因此，我们使用技术将手机网页调试信息分离，实现一种能在大屏幕、高配置PC上来调试小屏幕、低配置的手机浏览器访问的网页的开发工具——Remote Inspector（简称RI）。

1.1 主要功能

Android平台UC浏览器开发者版，主要支持以下功能：

 DOM查看和修改

 JavaScript调试、CSS调试

 网络状态查看

 资源文件查看

 Console控制台

- 2 -

2 准备工作

2.1 手机端

进入UC官方网站开发者中心（网站地址），下载Android平台的UC浏览器开发者版（UCBrowser_Dev_，下载地址），安装到手机中。

2.2 PC端

PC机一台，并在PC上安装Chrome或Safari（推荐使用Chrome）。支持Chrome

15 – Chrome 21，以及Safari5.1.4以上版本。

下载adb工具（adb_，下载地址）到PC中。

2.3 连接手机与PC

Android平台UC浏览器开发者版，远程调试支持USB连接、Wi-Fi连接两种模式。

2.3.1 Wi-Fi连接模式

Wi-Fi模式下，保证手机与PC处于同一个无线网段即可。

2.3.2 USB连接模式

USB连接模式需要搭建Android SDK开发环境或安装adb工具。

//附Windows操作系统上的adb安装参考

1) 在PC上，通过网络下载安装豌豆荚（Android手机助手）；

2) 在手机上打开USB调试模式：

设置>应用程序>开发>USB调试

- 3 -

3) 连接手机与PC，若PC无手机驱动，豌豆荚会自动下载驱动并安装；

4) 将手机与PC连接，能被豌豆荚识别则为正常连接

5) 将adb_解压到C:WINDOWSsystem32目录下

6) 开始>运行>输入 进入Windows命令提示符窗口，输入adb，如果无错误提示，并能够看到”Android Debug Bridge version 1.0.26”的提示，则表明adb安装成功

搭建好Android SDK开发环境或安装好adb工具后，通过adb命令进行端口映射。

在Windows命令提示符窗口（）运行：adb forward tcp:9998 tcp:9998

2.3.3 针对MAC上的调试使用方法

对于开发环境是MAC机的开发者也可以使用UC的开发者版本进行开发和调试web页面，也有两种连接模式（即Android手机与MAC机连接）：

(1) Wifi连接模式

Wi-Fi模式下，保证手机与PC处于同一个无线网段即可。

(2) USB连接模式

USB连接模式需要搭建Android SDK开发环境或安装adb工具。

//附MAC机操作系统（Mac OS X 10.7.4 及其以上版本）上的adb安装参考。

1)下载Android sdk for mac

- 4 -

打开safari浏览器，输入网址：

/sdk/

显示的页面大概如下:

2)点击“Download the SDK” 图片链接，开始去下载android-adk开发包。

本示例中，笔者下载到的安装包是： adt-bundle-mac-x86_

Safari自动解压后目录是 adt-bundle-mac-x86_64-20130522/

在mac上的完整目录是：

/Users/huangmy/Downloads/adt-bundle-mac-x86_64-20130522/

注：这是笔者的mac机目录结构情况，读者应该注意要替换为自己的mac机的目录。以下描述中若出现目录，无特别说明，都是笔者当时的mac机目录结构情况，读者应该注意要替换为自己的mac机的目录。

3）为了便于管理，把android-adk目录从下载目录移动到android工作目录。先创建android工作目录，再移动目录。具体操作如下：

打开一个命令行窗口（终端），输入以下命令：

mkdir /Users/huangmy/android

cd /Users/huangmy/Downloads/

mv adt-bundle-mac-x86_64-20130522/ ../android/

4) 配置环境变量

打开一个命令行窗口（终端），编辑当前用户的配置文件（.bash_profile），输入以下命令：

vim ~/.bash_profile

- 5 -

(注： 笔者是使用VIM文本工具，读者也用此工具（需安装该工具VIM），也可以用其他的文本编辑工具）

在文件的最后输入以下文本行：

ANDROID_SDK_PATH=/Users/huangmy/android/adt-bundle-mac-x86_64-20130522/sdk

export ANDROID_SDK_PATH

export PATH=$PATH:$ANDROID_SDK_PATH/platform-tools:$ANDROID_SDK_PATH/tools

截图如下：

输入结束，保存并退出VIM。

5) 使配置文件立刻生效，可输入命令：

source ~/.bash_profile

6）检查android的adb工具是否有效， 可输入命令：

adb version

回车后，若看到adb的版本信息，则说明adb工具现在已经可以使用了。如下图：

注：不同的adb版本，adb版本号可能不一样，示例中是笔者mac机上安装的adb版本号。

7)之后关于adb工具的用法与 2.3.2章节中的使用方法一样，做端口映射，即在命令行窗口中执行:

adb forward tcp:9998 tcp:9998

然后就可以在mac机上使用safari或chrome浏览器通过usb来连接手机上的UC浏览器了。

- 6 -

3 调试方式

在手机上启动UC浏览器开发者版，并打开需要调试的页面。

在PC上打开Chrome或Safari

 若是Wi-Fi连接模式，则在地址栏输入：手机IP + :9998

例，手机IP为192.168.112.244，则输入192.168.112.244:9998

此时手机端的UC浏览器开发者版会弹出对话框，如下：

选择确定，允许调试。

 若是USB连接模式，则在地址栏输入：localhost:9998

成功访问该网址后，即可看到UC浏览器开发者版已打开索引页面：

- 7 -

接下来，点击任一需要调试的页面即可进行调试。调试方法与PC上Chrome或Safari开发者工具的调试方法类似。以UC产品下载站为例，点击进入调试页面：

- 8 -

当UC浏览器开发者版的某个页面被远端浏览器调试时，系统通知栏会显示扳手图标，提示UC浏览器-调试模式开启，表明当前手机页面处于调试状态。如图：

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

- 9 -

4 调试面板

这是UC浏览器开发者版的调试功能面板。本章节以下内容将介绍其中的元素面板、资源面板、网络面板，脚本面板以及控制台。

4.1 元素面板(Elements Panel)

在元素（Elements）面板中，可以看到整个页面的 DOM 树结构和每个元素的所有属性。可以在PC上修改这些元素及其属性，并实时在手机上看到修改后的效果。

4.1.1 高亮显示页面元素

在调试页面上，鼠标移至UC浏览器下载模块对应的HTML代码上，如下图：

- 10 -

则对应的手机上的被调试页面中对应的DOM元素 会在UC浏览器开发者版中被高亮显示，如下图：

- 11 -

4.1.2 查看选中元素的HTML代码

首先在PC浏览器的调试页面上的底部工具中，点击放大镜按钮开启Inspect功能：

开启Inspect功能

成功开启后放大镜按钮会变成蓝色。然后，在UC浏览器开发者版的被调试页面点击 "UC浏览器8.6.2.203"链接，如下图：

- 12 -

则对应的在PC端浏览器的调试页面会高亮显示" UC浏览器8.6.2.203"链接对应的HTML代码，如下图所示：

- 13 -

4.1.3 修改原页面的HTML代码

在PC端浏览器的调试页面上，修改“电脑版”为“PC版”，如图

- 14 -

对应的手机端被调试页面的页面结构也会随之发生变化，如下图:

4.2 资源面板(Source Panel)

在资源面板中，你可以看到手机端被调试页面从网络上下载的所有资源。

- 15 -

4.3 网络面板(Network Panel)

在网络面板中，可以查看各URL加载的情况，包括请求头和请求正文的内容以及请求加载的耗时。

- 16 -

4.4 脚本面板(Source Panel)

脚本面板主要是用于JavaScript脚本的调试，设置断点后，在手机端UC浏览器开发者版中刷新被调试页面，则会本次JavaScript处理中触发断点。

- 17 -

4.5 控制台(Console)

可以在PC浏览器中的调试页面中，在控制台输入命令进行所需要的操作。

*注：更多调试方法，可参考Google开发者中心（网站地址）

- 18 -

北京公司

总机：************传真：************地址：北京市海淀区苏州街29号院维亚大厦16层

邮编：100080

广州公司

电话：************传真：************地址：广州市天河区科韵路16号广州信息港B栋4楼

邮编：510665

武汉公司

总机：************传真：************地址：武汉市东湖开发区SBI创业街1栋15楼

邮编：430073

- 19 -

本文标签： 调试浏览器手机页面开发者