常用的抓包方法如下:
1、charles:需要设置手机代理,https协议,需要额外再装协议
2、chrome浏览器或safair浏览器插件:需要在开发环境的app才可以联调,生成环境app的调试都是关闭的
3、后端日志抓包:数据量大,查找不方便
以上3种不能满足实际的场景需求,如客户手机出现了接口异常,就没有办法能够实时的查看,我们需要一种能够不受网络、地理因素影响的抓包方案;
4、通过localStorage缓存接口参数及异常信息,然后通过页面展示出来,再把异常信息复制出来发给开发,就可以及时的获得接口异常信息,而且精准性高、不受地理等因素影响,具体如下图:
效果图:
代理思路如下:
1、所有的请求接口,都用通过功能的方法进行请求,请求完成后,把请求的参数、返回值,都存储到localStorage中,命名为localAjaxData
2、通过查询页面,读取localStorage.localAjaxData
3、可以把查询页面生成一个二维码进行访问,扫码访问更方便使用
如上图所示的方法在客户端快速获取接口数据,
在这个过程中总结的几个问题:
1、写入和读取localStorage的方法最好进行封装
function getStorage(key){
var v=localStorage.getItem(key);
if(!v){return null}
var v4=v.slice(0,4);
if(v4=='obj-'){
v=JSON.parse(v.slice(4));
}else if(v4=='str-'){
v=v.slice(4);
}
return v
}
function setStorage(key,value){
var v=value;
if(typeof v == "object"){
v="obj-"+JSON.stringify(v)
}else{
if(value === null || value === undefined){
v="str-"
}else{
v="str-"+v
}
}
localStorage.setItem(key,v);
}
2、怎么发给开发
我的最终方案是使用的使用了clipboard.js v-1.5.15版插件实现的,原生的js提供的document.execCommand('copy’)有兼容问题,ios效果不好
考虑过发请求和发邮件,发请求的化需要维护单独的接口、数据库,数据安全性、数据冗余、垃圾数据问题,发邮件有长度限制
3、当返回的数据里有html片段的时候,ios读取的时候会有报错,是由于换行符、和引号引起的页面异常,我的解决办法是再写入的时候,就把空白字符和引号去掉
/**
* 异常回调的特殊判断,如果返回的是html,需要特殊处理
* @param {object} err
*/
errHasHtml({err}){
let reg = new RegExp(/<\s*html\s*>/,'gi')
reg.lastIndex = 0;
let res = false
if(!!err&&
(typeof err === 'object') &&
!!err.response &&
(typeof err.response === 'object') &&
!!err.response.data &&
(typeof err.response.data === "string") &&
reg.test(err.response.data)
){
res = true
}
return res
}
4、自动打开邮件的代码
<a href=“mailto:xxx@xx.com?subject=title&body=content”></a>
5、在页面展示带有html代码页面会变得混乱
我是使用textarea解决的,我试过pre标签,效果不好