H5 移动端调试全攻略

Stella981
• 阅读 1100

H5 移动端调试全攻略

文章来源:http://jartto.wang/2018/11/01/mobile-debug/

随着移动设备的高速发展,H5 开发也成为了 F2E 不可或缺的能力。而移动开发的重中之重就是掌握调试技巧,修 Bug 于无形。

一、概要

因为移动端操作系统分为 iOSAndroid 两派,所以本文的调试技巧也会按照不同的系统来区分。寻找最合适高效的方式,才能让你事半功倍。

文章会列举目前适合移动端调试的多种方案,快来选择你的最佳实践吧!

二、iOS 设备

Safari:iphone 调试利器,查错改样式首选,需要我们做如下设置:

  • 浏览器设置:Safari - 偏好设置 - 高级 - 勾选「在菜单栏中显示开发」菜单

  • iphone 设置:设置 - Safari - 高级 - 打开 Web 检查器

大功告成,这时候通过手机的 Safari 来打开 H5 页面,我们通过浏览器开发选项可以看到:

H5 移动端调试全攻略

iOS 模拟器:不需要真机,适合调试 WebviewH5 有频繁交互的功能页面。

首先下载 Xcode ,运行项目,选择模拟器 iphonex,编译后就会打开模拟器,如下:

H5 移动端调试全攻略

可以看到 H5 已经在「壳子」中运行起来了,下来就可以尝试调用 Webview 的方法,和「壳子」交互了。更多的调试技巧可以参考文章:iOS 模拟器调试。

具体的调试功能还是依赖浏览器的开发选项,与上无异,就不赘述了。

三、抓包

Charles:Mac OS 系统首选的抓包工具,适合查看、控制网络请求,分析数据情况。

Charles 抓包首先需要配置手机代理,Wifi - 配置代理(IP 地址) - 手动,如下图:

H5 移动端调试全攻略

H5 移动端调试全攻略

配置好手机代理,这时候打开 Charles ,就会收到确认提醒,选择允许。接下来就可以捕获手机的请求了,但是这些都是常规操作,我们来点高级的。

有意思的是:我们可以用本地文件来替换线上文件,方便调试,远程定位线上问题。

选择 Structure,找到需要替换的文件,右键菜单 - Map Local,如下图:

H5 移动端调试全攻略

这时候就会打开一个弹窗,填写具体的配置:

H5 移动端调试全攻略

OK,大功告成,快去改动本地文件吧,从此再也不怕线上调试了。需要注意的是如果抓取 HTTPS 请求,要安装信任证书,下文会详细说明。

与之相应的是 Windows 平台的 Fiddler,功能大致相似,这里就不细说了。

四、Spy-Debugger

spy-debugger:移动端调试的利器,便捷的远程调试手机页面、抓包工具。

我们先来安装:

> sudo npm install spy-debugger -g

启动命令:

> spy-debugger

这时候,控制台会打印出如下信息,说明服务已经启动了:

正在启动代理 本机在当前网络下的IP地址为:10.200.24.46 node-mitmproxy启动端口: 9888 浏览器打开 ---> http://127.0.0.1:50389

最后一步,设置手机代理:10.200.24.46,端口号:9888。补充说明一下:

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

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

接下来,尝试一下抓包:

H5 移动端调试全攻略

再打开调试页面:

H5 移动端调试全攻略

HTTPS 抓包,需要安装根证书,下文会详细说明。

五、Whistle

上面推荐了一款操作简单的调试利器,升级一下,看看更加强大的调试工具 whistle

whistle:基于 Node 实现的跨平台 Web 调试代理工具。

whistle(读音[ˈwɪsəl],拼音[wēisǒu])是基于 Node实现的跨平台抓包调试代理工具,有以下基本功能:

  1. 查看 HTTPHTTPS请求响应内容

  2. 查看 WebSocketSocket 收发的帧数据

  3. 设置请求 hosts、上游 http/socks 代理

  4. 修改请求 url 、方法、头部、内容

  5. 修改响应状态码、头部、内容,并支持本地替换

  6. 修改 WebSocketSocket 收发的帧数据

  7. 内置调试移动端页面的 weinrelog

  8. 作为 HTTP 代理或反向代理

  9. 支持用 Node 编写插件扩展功能

大致了解后,我们来尝试安装:

sudo npm install -g whistle

淘宝镜像:npm install whistle -g –registry=https://registry.npm.taobao.org

whistle 安装完成后,执行命令 whistle helpw2 help,查看 whistle 的帮助信息:

run       Start a front service start     Start a background service stop      Stop current background service restart   Restart current background service help      Display help information

这里只列出部分命令,更多请 w2 help 查看。

看到上面的操作,我们何不试试缩写 w2 start 来启动服务:

w2 start

看到如下的输出,说明服务已经正常启动了:

H5 移动端调试全攻略

这时候在浏览器打开链接,同时手机上配置代理(同 Charles),接下来就可以愉快的调试了。值得注意的是,whistle 的功能远非如此,更多的扩展请移步官网文档,贴张图先预览下:

H5 移动端调试全攻略

记得开启拦截 HTTPS:勾选 Capture HTTPS CONNECTs

六、安装 HTTPS 证书

对于 Charles,按照如下操作安装证书:

help-SSL - Proxying - install Charles root

H5 移动端调试全攻略

弹出安装证书的提示框:

H5 移动端调试全攻略

按照提示去手机浏览器打开:chls.pro/ssl,安装信任证书即可。

对于 spy-debuggerHTTPS 抓包,需要安装根证书,选择 RootCA,扫描二维码按照提示信任证书。安装证书的时候需要注意以下几件事情:

1.手机必须先设置完代理后再通过(非微信)手机浏览器访问 http://s.xxx (地址二维码)安装证书;
2.手机首次调试需要安装证书,已安装了证书的手机无需重复安装;
3.手机和 PC 保持在同一网络下(比如同时连到一个 WIFI 下);

切记:移动设备和 PC 必须在一个 WIFI 下。

七、真机调试

上面说了很多,但是实际开发过程中,我们不会等上线了才去验证兼容性,所以你可能需要提前「真机调试」。这里提供两种方式:

Chrome Remote Devices:依赖 Chrome 来进行远程调试,适合安卓手机。

首先,开启 Android 手机的「开发者选项」,勾选 「USB 调试」。
然后,Chrome 中输入:chrome://inspect,进入调试页面。

很全面的一篇文章,可以参考:Chrome 远程调试。

localhostip,扫描二维码手机显示,这个比较简单。

可以在浏览器安装一个 Chrome 插件,用于将当前页面链接转换成二维码,这样就能边开发边真机预览,非常方便。

八、调试工具

这里推荐一款调试工具:vConsole,一个轻量、可拓展、针对手机网页的前端开发者调试面板。安装很简单:

npm install vconsole

如果未使用 AMD/CMD 规范,可直接在 HTML 中引入 vConsole 模块。为了便于后续扩展,建议在 <head> 中引入:

`
  
  

`

如果使用了 AMD/CMD 规范,可在 module 内使用 require() 引入模块:

var VConsole = require('path/to/vconsole.min.js'); var vConsole = new VConsole();

请注意,VConsole 只是 vConsole 的原型,而非一个已实例化的对象。

所以在手动 new 实例化之前,vConsole 不会被插入到网页中。大概功能如下图:

H5 移动端调试全攻略

H5 移动端调试全攻略

看起来很完美,但是有个小缺点:网络请求,需要刷新页面,可是很多内嵌的 H5 页面是没有机会刷新页面的,所以需要客户端童鞋配合增加刷新的功能方便调试。

九、场景分析

既然移动端调试有这么多种方案,那在实际操作中,我该如何取舍?

说了这么多钟方案,这里总结一下各个方案的适用场景,根据不同的场景去选择最佳的调试方案,这样才能更快速的输出,Carry 全场:

1.SafariiPhone 调试利器,查错改样式首选;
2.iOS 模拟器:不需要真机,适合调试 WebviewH5 有频繁交互的功能页面;
3.CharlesMac OS 系统首选的抓包工具,适合查看、控制网络请求,分析数据情况;
4.Fiddler:适合 Windows 平台,与 Charles 类似,查看、控制网络请求,分析数据情况;
5.Spy-Debugger:移动端调试的利器,便捷的远程调试手机页面、抓包工具;
6.Whistle:基于 Node 实现的跨平台 Web 调试代理工具;
7.Chrome Remote Devices:依赖 Chrome 来进行远程调试,适合安卓手机远程调试静态页;
8.localhostip:真机调试,适合远程调试静态页面;
9.vConsole:内置于项目,打印移动端日志,查看网络请求以及查看 CookieStorage

十、白屏处理

移动端的白屏是最头疼的问题,这里顺带提供几种分析问题的思路,以供参考。

1.方案分析 ☆

一般上线后出现问题,我们最容易想到的就是:是否是新代码引起的问题。所以有效解决手段就是「控制变量法」。

2.代码注释法 ☆

莫名奇妙的白屏,适合页面无异常日志,同时无请求发送,问题集中在单一页面的情况。这种问题比较直观,肯定是某一页面出现了代码异常或是无效的 return,导致页面渲染终止,但并不属于异常。这时候,「代码注释法」将是你的最佳选择,逐行去注释可以代码,直到定位问题。

3.类库异常,兼容问题 ☆

这种场景也会经常遇到,我们需要用可以调试页面异常的方式,如 SafariSpy-DebuggerWhistlevConsole 查看异常日志,从而迅速定位类库位置,从而找寻替换或是兼容方案。

4.try catch ☆☆

如果你的项目没有异常监控,那么在可疑的代码片段中去 Try Catch 吧。

5.Debug 包 ☆☆☆

在你的项目中装上 [vConsole](https://link.zhihu.com/?target=http%3A//jartto.wang/2018/11/01/mobile-debug/),并配合客户端 debug 插件,360 度无死角监控异常,这才是最有效的方式。

6.ES6 语法兼容 ☆

一般我们都会通过 Babel 来编译 ES6 ,但是额外的第三方类库如果有不兼容的语法,低版本的移动设备就会异常。所以,先用上文讲述的调试方法,确定异常,然后去增加 [polyfill](https://link.zhihu.com/?target=https%3A//polyfill.io/v2/docs/examples) 来兼容吧。

H5 移动端调试全攻略

喜欢就点个在看再走吧 H5 移动端调试全攻略

本文分享自微信公众号 - 进击的切图仔(gh_f4aeac3d02b4)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
2年前
Java获得今日零时零分零秒的时间(Date型)
publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这