让你在PC上调试Web App,UC浏览器发布开发者版
目前,在手机上使用浏览器访问网页,无法便捷地进行网页语言调试。手机屏幕相对较小且操作不便,直接在手机上进行网页数据调试不太现实。
因此,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安装参考
- 在PC上,通过网络下载安装豌豆荚(Android手机助手);
- 在手机上打开USB调试模式:设置>应用程序>开发>USB调试
- 连接手机与PC,若PC无手机驱动,豌豆荚会自动下载驱动并安装;
- 将手机与PC连接,能被豌豆荚识别则为正常连接
- 将adb_tool.zip解压到C:\WINDOWS\system32目录下
- 开始>运行>输入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浏览器发布开发者版的更多相关文章
- 如何优化运行在webkit上的web app
如何优化运行在webkit上的web app 近来公司有个web app 项目运行在移动版android系统上,发现在电脑上跑的很流畅的web页面在移动版webkit上非常不流畅.根本无法和nativ ...
- 绕过限制,在PC上调试微信手机页面
场景 假设一个手机页面,开发者对其做了限制,导致只能在微信客户端中打开.而众所周知手机上非常不利于调试页面,所以需要能在电脑上打开并进行调试.这里针对常见的三种页面做一下分析,一一绕过其限制,(当然不 ...
- 在PC上调试微信手机页面的三种方法
场景 假设一个手机页面,开发者对其做了限制,导致只能在微信客户端中打开.而众所周知手机上非常不利于调试页面,所以需要能在电脑上打开并进行调试.这里针对常见的三种页面做一下分析,一一绕过其限制,(当然不 ...
- Chrome远程调试手机端UC浏览器
今天在手机UC上发现我的一个网页打不开,而在PC上是正常的,因此需要通过Chrome远程调试手机端UC浏览器查下问题,折腾了老久才弄好. 获取 Google USB 驱动程序 首先将手机通过USB接口 ...
- 调试WEB APP多设备浏览器
方法:adobe shadow \ opera远程调试\ weinre adobe shadow: 我们经常使用Firefox的firebug或者Chrome的开发人员工具进行Web调试页面,Jav ...
- 调试WEB APP多设备浏览器(转)
方法:adobe shadow \ opera远程调试\ weinre adobe shadow: 我们经常使用Firefox的firebug或者Chrome的开发人员工具进行Web调试页面,J ...
- 夜神模拟器调试web APP
前言:之前工作之余的时间自己做了一个web APP,但是都是在浏览器上调试的,这次想看看在手机上啥效果,所以下载了一个夜神模拟器 一.下载夜神模拟器 https://www.yeshen.com/ 二 ...
- 在GOOGLE浏览器中模拟移动浏览器 调试Web app
在此记录下,以便在今后的工作中用到. 首先通过F12 or Ctrl+Shift+i,打开开发者工具,点击开发者工具面板的 (show drawer)按钮,出现如下图所示的面板: 切换至Emulat ...
- 开发ProxyServer的时候如何在一台PC上调试
为了测试在真实的网络环境下你的ProxyServer性能如何,而你手头又只有一台电脑,怎么办? 打开你的ProxyServer(我用java写的,因此ProxyServer的进程是javaw.exe) ...
随机推荐
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- Bootstrap-Select 动态加载数据的小记
关于前端框架系列的可以参考我我刚学Bootstrap时候写的LoT.UI http://www.cnblogs.com/dunitian/p/4822808.html#lotui bootstrap- ...
- ExtJS 4.2 组件的查找方式
组件创建了,就有方法找到这些组件.在DOM.Jquery都有各自的方法查找元素/组件,ExtJS也有自己独特的方式查找组件.元素.本次从全局查找.容器内查找.form表单查找.通用组件等4个方面介绍组 ...
- HTTP常用状态码分析
不管是面试还是工作中,经常会碰到需要通过HTTP状态码去判断问题的情况,比如对于后台RD,给到前端FE的一个接口,出现502或者504 error错误,FE就会说接口存在问题,如果没有知识储备,那就只 ...
- spring注解源码分析--how does autowired works?
1. 背景 注解可以减少代码的开发量,spring提供了丰富的注解功能.我们可能会被问到,spring的注解到底是什么触发的呢?今天以spring最常使用的一个注解autowired来跟踪代码,进行d ...
- PHP-----文件系统的交互
本文讲解php中于文件交互中所使用的函数 代码示例 <html> <head> <title> File Detail </title> </he ...
- Loadrunner Http Json接口压力测试
前天接到了一个测试任务,要求测试一下ES(elsticsearch)在不同并发下的查询效率.如图: 业务场景是在客户端根据具体车牌查询相关车辆信息,结果返回前10条记录. 从图中可以看到,接口的请求参 ...
- JavaScript作用域
JavaScript作用域 JavaScript作用域一直是前端开发的难题,现在只要用五句话就可解决. 一.“JavaScript中无块级作用域” 在Java或C#中存在块级作用域,即:大括号也是一个 ...
- SuperMap-iServer-单点登录功能验证(CAS)
SuperMap-iServer-单点登录功能验证(CAS) 1.测试目的: 验证SuperMap-iServer使用CAS单点登录的功能是否正常. 2.测试环境: SuperMap-iServer8 ...
- Android中的flexboxlayout布局
提到FlexboxLayout大家估计有点模糊,它是谷歌最近开源的一个android排版库,它的前身Flexbox是2009年W3C提出了一种新的布局,可以简便.完整.响应式的实现页面布局,Flexb ...