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

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

主要功能

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

  • DOM查看和修改
  • JavaScript调试、CSS调试
  • 网络状态查看
  • 资源文件查看
  • Console控制台

准备工作

手机端

进入UC官方网站开发者中心( 网站地址 ),下载Android平台的UC浏览器开发者版(UCBrowser_Dev_RI.apk, 下载地址 ),安装到手机中。

PC端

PC机一台,并在PC上安装Chrome或Safari(推荐使用Chrome)。支持Chrom

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

下载adb工具(adb_tool.zip,下载地址)到PC中。

连接手机与PC

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

Wi-Fi连接模式

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

USB连接模式

USB连接模式需要搭建Android SDK开发环境或安装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,如果无错误提示,并能够看到”Android Debug Bridge version 1.0.26”的提示,则表明adb安装成功

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

在Windows命令提示符窗口(cmd.exe)运行:adb forward tcp:9998 tcp:9998

调试方式

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

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

调试的具体方式什么的就不详细讲了,可以直接去下载我的,我就贴图几张吧!

相关下载:

让你在PC上调试Web App,UC浏览器发布开发者版的更多相关文章

  1. 如何优化运行在webkit上的web app

    如何优化运行在webkit上的web app 近来公司有个web app 项目运行在移动版android系统上,发现在电脑上跑的很流畅的web页面在移动版webkit上非常不流畅.根本无法和nativ ...

  2. 绕过限制,在PC上调试微信手机页面

    场景 假设一个手机页面,开发者对其做了限制,导致只能在微信客户端中打开.而众所周知手机上非常不利于调试页面,所以需要能在电脑上打开并进行调试.这里针对常见的三种页面做一下分析,一一绕过其限制,(当然不 ...

  3. 在PC上调试微信手机页面的三种方法

    场景 假设一个手机页面,开发者对其做了限制,导致只能在微信客户端中打开.而众所周知手机上非常不利于调试页面,所以需要能在电脑上打开并进行调试.这里针对常见的三种页面做一下分析,一一绕过其限制,(当然不 ...

  4. Chrome远程调试手机端UC浏览器

    今天在手机UC上发现我的一个网页打不开,而在PC上是正常的,因此需要通过Chrome远程调试手机端UC浏览器查下问题,折腾了老久才弄好. 获取 Google USB 驱动程序 首先将手机通过USB接口 ...

  5. 调试WEB APP多设备浏览器

    方法:adobe shadow  \ opera远程调试\ weinre adobe shadow: 我们经常使用Firefox的firebug或者Chrome的开发人员工具进行Web调试页面,Jav ...

  6. 调试WEB APP多设备浏览器(转)

      方法:adobe shadow  \ opera远程调试\ weinre adobe shadow: 我们经常使用Firefox的firebug或者Chrome的开发人员工具进行Web调试页面,J ...

  7. 夜神模拟器调试web APP

    前言:之前工作之余的时间自己做了一个web APP,但是都是在浏览器上调试的,这次想看看在手机上啥效果,所以下载了一个夜神模拟器 一.下载夜神模拟器 https://www.yeshen.com/ 二 ...

  8. 在GOOGLE浏览器中模拟移动浏览器 调试Web app

    在此记录下,以便在今后的工作中用到. 首先通过F12 or Ctrl+Shift+i,打开开发者工具,点击开发者工具面板的 (show  drawer)按钮,出现如下图所示的面板: 切换至Emulat ...

  9. 开发ProxyServer的时候如何在一台PC上调试

    为了测试在真实的网络环境下你的ProxyServer性能如何,而你手头又只有一台电脑,怎么办? 打开你的ProxyServer(我用java写的,因此ProxyServer的进程是javaw.exe) ...

随机推荐

  1. 【AR实验室】OpenGL ES绘制相机(OpenGL ES 1.0版本)

    0x00 - 前言 之前做一些移动端的AR应用以及目前看到的一些AR应用,基本上都是这样一个套路:手机背景显示现实场景,然后在该背景上进行图形学绘制.至于图形学绘制时,相机外参的解算使用的是V-SLA ...

  2. 如何一步一步用DDD设计一个电商网站(五)—— 停下脚步,重新出发

    阅读目录 前言 单元测试 纠正错误,重新出发 结语 一.前言 实际编码已经写了2篇了,在这过程中非常感谢有听到观点不同的声音,借着这个契机,今天这篇就把大家提出的建议一个个的过一遍,重新整理,重新出发 ...

  3. 在ASP.NET Core中使用百度在线编辑器UEditor

    在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...

  4. setAttribute()

    ●节点分为不同的类型:元素节点.属性节点和文本节点等.   ●getElementById()方法将返回一个对象,该对象对应着文档里的一个特定的元素节点.   ●getElementsByTagNam ...

  5. ASP.NET MVC开发:Web项目开发必备知识点

    最近加班加点完成一个Web项目,使用Asp.net MVC开发.很久以前接触的Asp.net开发还是Aspx形式,什么Razor引擎,什么MVC还是这次开发才明白,可以算是新手. 对新手而言,那进行A ...

  6. C# 泛型

    C# 泛型 1.定义泛型类 在类定义中包含尖括号语法,即可创建泛型类: class MyGenericClass<T> { //Add code } 其中T可以遵循C#命名规则的任意字符. ...

  7. 基于NPOI的Excel数据导入

    从Excel导入数据最令人头疼的是数据格式的兼容性,特别是日期类型的兼容性.为了能够无脑导入日期,折腾了一天的NPOI.在经过测试确实可以导入任意格式的合法日期后,写下这篇小文,与大家共享.完整代码请 ...

  8. TFS 2015 敏捷开发实践 – 看板的使用

    看板在现代应用开发过程中使用非常广泛,不管是使用传统的瀑布式开发还是敏捷开发,都可以使用看板管理.因为看板拥有简单的管理方法,直观的显示方式,所以很多软件开发团队选择使用看板进行软件开发管理.本文不在 ...

  9. js实现四大经典排序算法

    为了方便测试,这里写了一个创建长度为n的随机数组 function createArr(n) { var arr = []; while (n--) { arr.push(~~(Math.random ...

  10. codevs 3289 花匠

    题目:codevs 3289 花匠 链接:http://codevs.cn/problem/3289/ 这道题有点像最长上升序列,但这里不是上升,是最长"波浪"子序列.用动态规划可 ...