背景
目前有许多场景,
如:客户环境的系统,移动端企微,由于前端打包后会去掉打印信息,所以无法直接判断,需要代理本地项目到线上去定位问题。
但代理抓包软件有很多,如:charles、fiddler、wireShark。charles使用起来比较简单,本文就以charles为例,大佬们有更高要求的可以使用fiddler、wireShark。
第一步:charles配置
Help->SSL Proxying -> install Charles Certificate -> 安装证书 -> 一路确定点下去就行,显示导入成功
完成后显示‘导入成功’即完成。
Proxy->SSL ProxySetting -> Add -> Host: Port: 代理全部端口
设置新的映射关系 : Tools->Map Remote Settings -> add,注意 Https的默认端口是 443 不是 80
新建或导入代理配置:Tools->Rewrite
点击Add添加代理配置
首先添加域名
配置代理规则
本地代理线上
反向代理接口
启用rewrite。
第二步:设备配置(公有云)
pc端本机:
浏览器访问 chls.pro/ssl。会自动下载证书。
在(谷歌)浏览器设置->隐私安全性->凭证管理 中导入证书
跑起代码就可以进行代理了。
移动设备(手机、笔记本等):
第一步
代码机开启wifi
查看代码机ip地址
移动设备接入wifi并配置wifi代理
host为代码机的IP地址
port为charles开启的端口
第二步
浏览器访问chls.pro/ssl,下载证书。
安卓一般在 设置->安全->加密和凭据 ->从存储设备安装 中安装证书
IOS则要先在描述文件中先安装,再到关于本机 -> ……信任 中信任插件
自此,公有云pc端和移动端就可以正常代理了。
第二步番外篇:私有化
!!!基本步骤按照公有云。
私有化需要使用政务微信调试,但是政务微信有加密,抓不到https包不能正常调试。
(目前安卓6.0以上很多都抓不到,ios可以正常抓包,桌面端有些版本的政务微信可以抓到)
1.安卓6.0及ios直接按照公有云步骤进行,就可以进行代理抓包到政务微信了。
2.安卓6.0以上,鸿蒙的,可以尝试使用平行空间64位(不一定彳亍,但是不试就一定不彳亍)。
大佬们自己百度一下就找得到了 或者 找润鑫大佬 or 子翔 🤺🤺🤺🤺🤺🤺
3.桌面端部分版本政务微信可以代理
提取码:8888
大佬们也可以尝试一些可以切换内核的安卓模拟器,不过目前所有的安卓模拟器都是🌶🐓。
或者电脑性能及其盈余,虚拟机搞个安卓6.0的内核镜像,反正安卓可以x86运行。
其他的一些方法:
原理就是在安卓机上安装框架,其实和虚拟机的原理类似,不好地方就是要root。而且,及其非人哉。
私有化移动端--缺陷定位示例:
第一步. 首先按照上述步骤进行代理
政务微信配置一下服务器
代理之后可以在代码做个alert,看看是否代理成功。
第二步. 定位、修复问题
问题:页脚栏显示错误。
引入vconsole方便我们在移动端进行调试。(记得调试完删除引入代码)
定位问题:找到对应的组件可以在pc端用开发者工具定位一下有问题的组件,方便查找问题。
使用开发者工具发现是bottomNav这个组件,而且是路由组件home的子组件,找到路由配置,定位到home组件。从而找到bottomNav组件。
判断问题造成的原因:
- js数据有问题
- html代码缺失 or 插值语句数据写错
根据原因进行定位:
找到代码,页脚每一项根据'dateNavList'属性做了一个v-for渲染,那么查看一下数据是否完整。(可以用vue开发者工具进行查看,也可以做个console输出,在vconsole中查看。)
en,发现数据有问题,而且是父组件传递过来的,同时数据并没有在子组件进行额外处理,那就到父组件中查找问题。
哦!父组件没有传递数据,那我们加上就好!然后到设备上看是否还有问题。
芜湖,修好了!
不过,实际缺陷修复中当然不会碰到这么简单的问题。这里总结一些近期缺陷修复的心得
- 先通过浏览器开发者工具检查network项里的接口数据是否有问题,同时通过代理抓包工具的抓到的网络包检查一下请求头、响应头等,确定是否前端问题。
- 大部分问题都是js的方法问题引起的,灵活运用vueDevTools,特别留意events的触发,可以帮助我们跟快速的定位问题。
- 留意mixin混入插件,灵活运用vscode、ide这些编辑器的全局查找功能。
- 对于一些方法中的形参可以多做一些console输出。
- 注意代码的执行顺序,留意异步、生命周期,多用try cache做尝试。
- 移动端一些样式显示问题最好先上网查一查是否存在其他的兼容性问题。
- 时刻注意数据类型的判断,做好空值判断处理。
- debugger断点的使用。