移動端抓包工具整理-新增代碼式抓包方法

常用的抓包方法如下：
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標籤，效果不好