登陆

章鱼彩票 苹果-9102了,你还不会移动端真机调试?

admin 2019-05-27 274人围观 ,发现0个评论

移动端调试困难

许多时分,咱们在进行移动端开发时,都是先在PC端运用手机模拟器进行调试,没有问题后,咱们才会在手机端的阅读器进行测验,这个时分,假如没有出现问题,大快人心。可是一旦出现问题,咱们就很难处理,由于缺少可视化的界面。不似在PC端,咱们能直观的去改动款式,或者是进行断点调试。有时,在移动端咱们不得不借助于alert来调试,可是这样的调试办法功率极端低下,许多时分,都是靠经历,或者是靠排除法。乃至,咱们不得不归结为是阅读器的完成问题。

那么,有什么什么办法,能够让咱们调试移动端的适配的时分,像调试PC端相同直观呢?本文旨在为你供给移动端的调试办法,希望能够为你翻开新的一扇门。

本文会给出三种真机调试办法,你能够挑选自己最喜欢的一款~

移动端真机调试办法

chrome真机调试

weinre调试

spy-debugger调试

简略阐明一下每一种章鱼彩票 苹果-9102了,你还不会移动端真机调试?办法的优缺点:

第一种: chrome真机调试,有一个很大的局限性便是,第一次运用chrome://inspect/#devices时,其实chrome需求下载一些东西才干支撑,这些东西国内网是无法拜访的,需求翻墙。可是最大的长处是: 简略便利。

第二种: 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中内容为空。

现在,咱们需求做别的一点操作,在咱们要调试的页面中,添加一个脚本。

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

然后,咱们在本地发动一个服务器,能够是IDE集成的服务器,或者是http-server,我运用的是http-server.发动之后,咱们在手机端拜访要调试的网页。然后就会发现targets下面添加了记载。

这时,咱们就能够点击Elements进行调试。

修正款式时,会在手机端即时收效,而且也能够检查操控台信息,仅有一点便是,不能进行断点调试。

最终,在调试完毕之后,别忘记删去嵌入的。

除了这种办法之后,还介绍了在手机端保存一段Js代码,在需求调试某个页面时,点击履行JS,可是现在阅读器为了安全起见,现已不再支撑此办法。默许的办法是查找,而非履行,所以不可取。

3.spy-debugger真机调试

最终,再介绍一下spy-debugger办法。用这个办法,咱们不再需求自己添加和删去脚本。

Spy-debugger内部集成了weinre,经过署理的办法阻拦一切html主动注入weinre所需的js代码。简化了weinre需求给每个调试的页面添加js代码。spy-debugger原理是阻拦一切html页面恳求注入weinre所需求的js代码。让页面调试愈加便利。

特性:

页面调试+抓包

操作简略

支章鱼彩票 苹果-9102了,你还不会移动端真机调试?撑HTTPS。

spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。

主动疏忽原生App建议的https恳求,只阻拦webview建议的https恳求。对运用了SSL pinning技能的原生App不形成任何影响。

能够合作其它署理东西一同运用(默许运用AnyProxy)

Spydebugger装置与运章鱼彩票 苹果-9102了,你还不会移动端真机调试?用

装置: 大局装置 npm install –g spy-debugger

发动: spy-debugger

设置手机的HTTP署理

署理的地址为 PC的IP地址 ,署理的端口为spy-debugger的发动端口(默许端口为:9888)默许端口是 9888。

假如要指定端口: spy-debugger –p 8888

Android设置进程:设置 - WLAN - 长按选中网络 - 修正网络 - 高档 - 署理设置 - 手动

iOS设置署理进程:设置 - 无线局域网 - 选中网络 - HTTP署理手动

手机装置证书(node-mitmproxy CA根证书)

第一步:生成证书:

生成CA根证书,根证书生成在 /Users/XXX/node-mitmproxy/ 目录下(Mac)。

spy-debugger initCA

第二步:装置证书:

把node-mitmp章鱼彩票 苹果-9102了,你还不会移动端真机调试?roxy文件夹下的 node-mitmproxy.ca.crt 传到手机上,点击装置即可。

Spy-debugger发动界面,相同,在手机端改写页面之后,targets中会有记载

以我从前做的京东游戏的页面展现一下作用,当咱们在手机上选中一个元素时,能够在电脑上看到相应的信息,这样咱们就能够看出有或许是什么款式不兼容导致了UI的反常了,相同,还能够在操控台中看到JS的log信息,关于移动端调试来说十分有协助。

]

总结:

chrome inspect运用场景有限

weinre装置简略,运用进程中需求添加和删去,假如调试页面许多的状况下,不适用。

spy-debugger装置略杂乱,可是运用进程十分愉快。

声明:该文观念仅代表作者自己,搜狐号系信息发布渠道,搜狐仅供给信息存储空间服务。
请关注微信公众号
微信二维码
不容错过
Powered By Z-BlogPHP