您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > APP

移动端真机调试方法

时间:2019-10-10 09:27:29  来源:  作者:
你还不会移动端真机调试?

 

很多时候,我们在进行移动端开发时,都是先在PC端使用手机模拟器进行调试,没有问题后,我们才会在手机端的浏览器进行测试,这个时候,如果没有出现问题,皆大欢喜。但是一旦出现问题,我们就很难解决,因为缺乏可视化的界面。不似在PC端,我们能直观的去改变样式,或者是进行断点调试。有时,在移动端我们不得不借助于alert来调试,但是这样的调试方法效率极其低下,很多时候,都是靠经验,或者是靠排除法。甚至,我们不得不归结为是浏览器的实现问题。

那么,有什么什么方法,能够让我们调试移动端的适配的时候,像调试PC端一样直观呢?本文旨在为你提供移动端的调试方法,希望能够为你打开新的一扇门。

本文会给出三种真机调试方法,你可以选择自己最喜欢的一款~

移动端真机调试方法

  1. chrome真机调试
  2. weinre调试
  3. spy-debugger调试

简单说明一下每一种方式的优缺点:

第一种: chrome真机调试,有一个很大的局限性就是,只能调试手机端的chrome浏览器,对于UC,QQ这些浏览器均不适用,因此在调试兼容问题时,帮助不大,但是最大的优点是: 简单快捷。

第二种: weinre调试方式,安装和适用不复杂,适用于全平台的调试,即任何手机的任何浏览器皆可以调试,不过需要手机和电脑在同一个网段下。

第三种:spy-debugger,安装稍微复杂一点,spy-debugger集成了weinre,不过还增加了抓包工具,使用最为方便。

下面我们开始具体介绍如何使用这三种调试方法:

1.chrome真机调试

手机端下载好chrome浏览器,使用USB连接到PC,打开手机的USB调试模式。

然后在PC端打开chrome浏览器,在地址栏输入: chrome://inspect. 勾选"discovery usb device"。然后在手机端浏览网页,就可以看到如下的页面,点击inspect,进行调试。(鉴于我的工作电脑是加了域的,因为并不能使用这个方式,如果有和我一样情况的童鞋,可以考虑使用另外两种调试方式)

2.wenire真机调试

Weinre(WebInspector Remote)是一款基于Web Inspector(Webkit)的远程调试工具,借助于网络,可以在PC上直接调试运行在移动设备上的远程页面。

本地服务器: 可以使用http-server、Tomcat等,也可以使用编译器集成的服务

weinre安装

全局安装: npm install –g weinre

局部安装: npm install weinre

启动: weinre --httpPort 8090 --boundHost -all-

如果是局部安装的话,需要在前面加上 node_modules/.bin/

相信前端的童鞋都会用npm包管理工具,对于这个工具,我就不展开了,如果没有安装npm的,自行安装。

weinew启动参数说明:

  • httpPort: 设置Wninre使用的端口号,默认是8080
  • boundHost: [hostname | Ip | -all-]: 默认是 ‘localhost’.
  • debug [true | false] : 这个选项与–verbose类似, 会输出更多的信息。默认为false。
  • readTimeout [seconds] : Server发送信息到Target/Client的超时时间, 默认为5s。
  • deathTimeout [seconds] : 默认为3倍的readTimeout, 如果页面超过这个时间都没有任何响应, 那么就会断开连接。

8080端口使用情况较多,所以我选择了指定8090端口。

启动了weinre之后,我们在浏览器中输入localhost:8090.显示如下界面,表示已经启动成功。

点击debug client user interface,进入调试页面。

当前的targets中内容为空。

现在,我们需要做另外一点操作,在我们要调试的页面中,增加一个脚本。

<script src="http://localhost:8090/target/target-script-min.js#anonymous"></script>

记住将localhost换成你的IP地址.

然后,我们在本地启动一个服务器,可以是IDE集成的服务器,或者是http-server,我使用的是http-server.启动之后,我们在手机端访问要调试的网页。然后就会发现targets下面增加了记录。

这时,我们就可以点击Elements进行调试。

修改样式时,会在手机端即时生效,并且也可以查看控制台信息,唯一一点就是,不能进行断点调试。

最后,在调试结束之后,别忘记删除嵌入的script。

除了这种方法之后,还介绍了在手机端保存一段Js代码,在需要调试某个页面时,点击执行JS,但是现在浏览器为了安全起见,已经不再支持此方法。默认的方法是搜索,而非执行,所以不可取。

3.spy-debugger真机调试

最后,再介绍一下spy-debugger方法。用这个方法,我们不再需要自己增加和删除脚本。

Spy-debugger内部集成了weinre,通过代理的方式拦截所有html自动注入weinre所需的js代码。简化了weinre需要给每个调试的页面添加js代码。spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码。让页面调试更加方便。

特性:

  1. 页面调试+抓包
  2. 操作简单
  3. 支持HTTPS。
  4. spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。
  5. 自动忽略原生App发起的https请求,只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不造成任何影响。
  6. 可以配合其它代理工具一起使用(默认使用AnyProxy)

Spydebugger安装与使用

  1. 安装: 全局安装 npm install –g spy-debugger
  2. 启动: spy-debugger
  3. 设置手机的HTTP代理
  4. 代理的地址为 PC的IP地址 ,代理的端口为spy-debugger的启动端口(默认端口为:9888)默认端口是 9888。
  5. 如果要指定端口: spy-debugger –p 8888
  6. Android设置步骤:设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动
  7. IOS设置代理步骤:设置 - 无线局域网 - 选中网络 - HTTP代理手动
  8. 手机安装证书(node-mitmproxy CA根证书)
  9. 第一步:生成证书:
  10. 生成CA根证书,根证书生成在 /Users/XXX/node-mitmproxy/ 目录下(mac)。
spy-debugger initCA
  1. 第二步:安装证书:
  2. 把node-mitmproxy文件夹下的 node-mitmproxy.ca.crt 传到手机上,点击安装即可。
  3. Spy-debugger启动界面,同样,在手机端刷新页面之后,targets中会有记录

以我曾经做的京东游戏的页面展示一下效果,当我们在手机上选中一个元素时,可以在电脑上看到相应的信息,这样我们就可以看出有可能是什么样式不兼容导致了UI的异常了,同样,还可以在控制台中看到JS的log信息,对于移动端调试来说非常有帮助。

总结:

  1. chrome inspect应用场景有限
  2. weinre安装简单,使用过程中需要增加和删除script,如果调试页面很多的情况下,不适用。
  3. spy-debugger安装略复杂,但是使用过程非常愉快。


Tags:移动端   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个由百度开源的低代码前端框架&mdash;&mdash;amis...【详细内容】
2021-11-05  Tags: 移动端  点击:(68)  评论:(0)  加入收藏
我们项目使用的是Vue和Vant组件,详情都可以看官网哦VantVue目录结构:基本配置入口文件main.js首先做一个引入我们的Vant UI组件是按需引入,而Element UI是全部引入所以引用方式...【详细内容】
2021-06-16  Tags: 移动端  点击:(139)  评论:(0)  加入收藏
前言移动端开发在前端里像神一样地存在,不是说它多难而是说它坑位实在太多了,怎样填都填不完。Android和iOS各显神通,Android的系统版本和屏幕分辨率多得难以一招兼容,iOS的顽固...【详细内容】
2021-03-18  Tags: 移动端  点击:(229)  评论:(0)  加入收藏
腾讯发布全球首个面向移动端的H.266/VVC标准视频解码器,即其自研的O266移动端版本,手机可看4K超高清VVC视频。O266已成为世界领先的全平台VVC解码器,支持main10 profile,包括高...【详细内容】
2021-02-05  Tags: 移动端  点击:(190)  评论:(0)  加入收藏
外卖UI一致性项目是外卖UI设计团队与研发团队共建的项目,目的是改善用户端体验的一致性,提升多技术方案间组件的通用性和复用率,降低整体视觉改版带来的研发成本。外卖技术团队...【详细内容】
2020-11-27  Tags: 移动端  点击:(125)  评论:(0)  加入收藏
移动互联网的推出,各位站长也纷纷的挤入了移动化网站,移动网站可以说是一个比一个做的漂亮,那么既然做了移动化的网站,那少不了的自然是SEO优化,在PC端上你的网站可能在某个词上...【详细内容】
2020-10-14  Tags: 移动端  点击:(89)  评论:(0)  加入收藏
导语:测试软件为: MXplayer 专业版 Uplayer 视频播放器 Xplayer QQ影音 VLC KMPplayer Oplayer 以上软件均来自手机乐园,酷安,play商店。我找的都是我认为排得上名的,在此基础...【详细内容】
2020-09-11  Tags: 移动端  点击:(130)  评论:(0)  加入收藏
本文由手机淘宝技术团队原创分享,吴志华(天施)、洪海(孤星)、陈虓将(仲升)等专家参与了本文创作,首次发表于公众号“淘系技术”,收录整理时有修订和改动。1、引言移动端网络的优化是...【详细内容】
2020-08-19  Tags: 移动端  点击:(73)  评论:(0)  加入收藏
虽然传闻8月中旬英特尔将有技术性沟通会,并且Tiger Lake的发布时间定在9月初,但还是有“心急”网友想要早些了解英特尔对于移动平台未来6个月的布局是怎样。近期,网络中曝光了...【详细内容】
2020-08-10  Tags: 移动端  点击:(82)  评论:(0)  加入收藏
作者:花花小仙女转发链接:https://mp.weixin.qq.com/s/c9uAYkWJu-zvKfELh_3V0A前言基于 vue-cli4.0+webpack 4+vant ui + sass+ rem 适配方案+axios 封装,构建手机端模板脚手...【详细内容】
2020-08-04  Tags: 移动端  点击:(55)  评论:(0)  加入收藏
▌简易百科推荐
  1、明确产品的需求分析+功能  这是最基本的也是第一步,我们要明确自己或者客户真的想要开发一款app应用,其次就要了解到底要开发什么功能什么类别和种类的app应用。所...【详细内容】
2021-12-27  木子科技    Tags:App   点击:(3)  评论:(0)  加入收藏
前言目前,即时通讯在app中逐渐成了不可或缺的功能,尤其是在疫情期间,音视频会议功能更是火了一把,但是想自己开发即时通讯功能,却一点都不简单,如果用原生开发的话,那么Android、iO...【详细内容】
2021-07-29  中控易动    Tags:APP   点击:(104)  评论:(0)  加入收藏
本篇博文将会提供一个关于如何使用WebRTC建立一个视频会议App的教程。我们不会将其设计的太复杂,它将会是一个简单的一对一视频会议App,并且仅仅使用了WebRTC APIs和一些其他...【详细内容】
2021-07-29  易简视源云会议    Tags:视频会议App   点击:(113)  评论:(0)  加入收藏
开发一款app需要多少钱?这是一个比较笼统的问题,没有确切的需求,拥有不同技术经验的团队往往报价都各不相同,因为不知道开发需求,所以无法给出一个准确的价格。因此,想知道app开发...【详细内容】
2021-07-13  hey衡道    Tags:app   点击:(79)  评论:(0)  加入收藏
Hybrid APP指的是半原生半Web的混合类App。需要下载安装,看上去类似Native App,但只有很少的UI Web View,访问的内容是 Web 。 原生是Native APP,H5就是Web App在Hybrid 当中,如...【详细内容】
2021-04-28  扣丁学堂  今日头条  Tags:APP页面   点击:(289)  评论:(0)  加入收藏
介绍MIP(Mobile Instant Pages - 移动网页加速器),是一套应用于移动网页的开放性技术标准。通过提供 MIP-HTML 规范、MIP-JS 运行环境以及 MIP-Cache 页面缓存系统,实现移动网页...【详细内容】
2021-04-12  爱分享Coder  今日头条  Tags:WebApp   点击:(309)  评论:(0)  加入收藏
在开发直播APP时,核心要素和基本要素是稳定性,一般各大服务商都有提供demo,并且可以免费测试的,测试可以初步评估下稳定性,看看视频流畅度如何,卡顿是不是很频繁,延时效果怎么样,视...【详细内容】
2021-03-19      Tags:直播APP   点击:(292)  评论:(0)  加入收藏
TOKEN作为用户身份凭证并不能保证数据安全,别人通过抓包等方式很容易拿到TOKEN,带上TOKEN请求我们的API接口就能获取数据;其实换一个角度想:我们只需保证即使TOKEN被别人冒用,也...【详细内容】
2021-02-18      Tags:APP,API   点击:(229)  评论:(0)  加入收藏
在当今移动互联网盛行的时代,网络的形态除了有线连接,还有2G/3G/4G/5G/WiFi等多种手机网络连接方式。不同的协议、不同的制式、不同的速率,使移动应用运行的场景更加丰富。目前...【详细内容】
2021-02-05      Tags:APP   点击:(201)  评论:(0)  加入收藏
虽然目前许多企业都进行了长沙APP开发,开始了移动互联网转型之路,但由于其中绝大部分企业都属于传统行业,对APP应用了解并不多,故而对开发工作也不是很清楚。为了大家能更好的了...【详细内容】
2021-02-01      Tags:APP应用   点击:(214)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条