9102了,你还不会移动端真机调试吗


Posted in Javascript onMarch 25, 2019

移动端调试困难

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

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

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

移动端真机调试方法

  • chrome真机调试
  • weinre调试
  • 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,进行调试。(鉴于我的工作电脑是加了域的,因为并不能使用这个方式,如果有和我一样情况的童鞋,可以考虑使用另外两种调试方式)

9102了,你还不会移动端真机调试吗

2.weinre真机调试

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

9102了,你还不会移动端真机调试吗

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

weinre安装

全局安装: npm install ?g weinre

局部安装: npm install weinre

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

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

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

weinre启动参数说明:

  • 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.显示如下界面,表示已经启动成功。

9102了,你还不会移动端真机调试吗

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

9102了,你还不会移动端真机调试吗

当前的targets中内容为空。

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

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

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

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

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

9102了,你还不会移动端真机调试吗

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

最后,在调试结束之后,别忘记删除嵌入的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代理

代理的地址为 PC的IP地址 ,代理的端口为spy-debugger的启动端口(默认端口为:9888)默认端口是 9888。

如果要指定端口: spy-debugger ?p 8888

Android设置步骤:设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动

iOS设置代理步骤:设置 - 无线局域网 - 选中网络 - HTTP代理手动

4、手机安装证书(node-mitmproxy CA根证书)

第一步:生成证书:

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

spy-debugger initCA

第二步:安装证书:

把node-mitmproxy文件夹下的 node-mitmproxy.ca.crt 传到手机上,点击安装即可。

Spy-debugger启动界面,同样,在手机端刷新页面之后,targets中会有记录

9102了,你还不会移动端真机调试吗

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

9102了,你还不会移动端真机调试吗

总结:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
JS中min函数实例讲解
Feb 18 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
详解原生JS回到顶部
Mar 25 #Javascript
javascript验证form表单数据的案例详解
Mar 25 #Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 #Javascript
详解javascript函数写法大全
Mar 25 #Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 #Javascript
Node.js之readline模块的使用详解
Mar 25 #Javascript
Javascript的this详解
Mar 23 #Javascript
You might like
zend framework多模块多布局配置
2011/02/26 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
JavaScript全局函数使用简单说明
2011/03/11 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
js实现图片推拉门效果代码实例
2019/05/18 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
python双向链表实现实例代码
2013/11/21 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
Python如何实现远程方法调用
2020/08/07 Python
软件测试英文面试题
2012/10/14 面试题
个人找工作的自我评价
2013/10/17 职场文书
理工科学生的自我评价
2013/12/15 职场文书
社会学专业求职信
2014/02/24 职场文书
商业项目策划方案
2014/06/05 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
十佳少年事迹材料
2014/12/25 职场文书
论文答辩开场白大全
2015/05/27 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书