移动端调试困难
很多时候, 我们在进行移动端开发时, 都是先在 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, 进行调试.(鉴于我的工作电脑是加了域的, 因为并不能使用这个方式, 如果有和我一样情况的童鞋, 可以考虑使用另外两种调试方式)
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 代码. 让页面调试更加方便.
特性:
页面调试 + 抓包
操作简单
支持 HTTPS.
spy-debugger 内部集成了 weinre,node-mitmproxy,AnyProxy.
自动忽略原生 App 发起的 https 请求, 只拦截 webview 发起的 https 请求. 对使用了 SSL pinning 技术的原生 App 不造成任何影响.
可以配合其它代理工具一起使用(默认使用 AnyProxy)
Spydebugger 安装与使用
安装: 全局安装 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-mitmproxy 文件夹下的 node-mitmproxy.ca.crt 传到手机上, 点击安装即可.
Spy-debugger 启动界面, 同样, 在手机端刷新页面之后, targets 中会有记录
以我曾经做的京东游戏的页面展示一下效果, 当我们在手机上选中一个元素时, 可以在电脑上看到相应的信息, 这样我们就可以看出有可能是什么样式不兼容导致了 UI 的异常了, 同样, 还可以在控制台中看到 JS 的 log 信息, 对于移动端调试来说非常有帮助.
]
总结:
Chrome inspect 应用场景有限
weinre 安装简单, 使用过程中需要增加和删除 script, 如果调试页面很多的情况下, 不适用.
spy-debugger 安装略复杂, 但是使用过程非常愉快.
最后, 谢谢阅读. 如果本篇博文给您带来了一点启发或者是帮助, 请帮忙点个 Star 吧, 非常感谢~ https://github.com/YvetteLau/Blog
来源: https://juejin.im/post/5c947f5251882568396a6773