基于移动端真机调试的图文教程(分享)

基于移动端真机调试的图文教程(分享),第1张

概述最近要分析web页面,在安卓和ios上的性能差异,除了 *** 作系统本身不同之外,应该还多地方要探究的,第一步就是要在真机上分析。所以总结一下几个方法。

最近要分析web页面,在安卓和ios上的性能差异,除了 *** 作系统本身不同之外,应该还多地方要探究的,第一步就是要在真机上分析。所以总结一下几个方法。

1.Mac+iPhone+ lightning+Safari 浏览器

步骤:

1)用:lighting线将mac与iphone相连

2)iphone打开Web检查器(设置->Safari->高级->Web检查器)

3)iphone用safari打开要进行分析的页面

4)mac打开safari浏览器(菜单->开发->对应的手机名称->要调试的页面),点击即进入Safari Developer Tools

5)可以见到的调试界面是这样的

缺点:不能调试webVIEw里面的页面

2.安卓手机+安卓数据线+电脑

步骤:

1)用数据线将手机与电脑相连

2)手机开启use调试(安卓不同机型开启的步骤不尽相同,不知道的百度一下)

3)打开Chrome,输入Chrome://inspect/#devices,勾选discover USB devices

4)用手机Chrome打开要调试的网页(如果是其他webVIEw页面,需要在app配置启动代码,详键官方教程)

5)选择你要调试的页面进入

6)可以见到是这样的调试界面

缺点:亲测,mac中调试界面与小米6手机的界面经常不同步, *** 作非常不方便,还好控制台还是能正常看东西

3.weinre

步骤:

1)可以直接npm install这个模块,然后启动,打开管理界面即可

2)直接安装whistle,自带了weinre。还可以代理不同环境,具体教程见:https://avwo.github.io/whistle/rules/weinre.HTML

缺点:可以说是极简主义了,步骤简单、调试简单、能调的也简单(就是查查元素,看看控制台,不能像Chrome那些分析工具一样)

以上这篇基于移动端真机调试的图文教程(分享)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的基于移动端真机调试的图文教程(分享)全部内容,希望文章能够帮你解决基于移动端真机调试的图文教程(分享)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1143336.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-31
下一篇2022-05-31

发表评论

登录后才能评论

评论列表(0条)

    保存