移动端抓包工具整理-新增代码式抓包方法

常用的抓包方法如下：
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:[email protected]?subject=title&body=content”></a>

5、在页面展示带有html代码页面会变得混乱
我是使用textarea解决的，我试过pre标签，效果不好