背景

測試環境 mobile 測試經常需要重新整理頁面重新載入資料或者 js, 特別在 app 裡面,這一步通常非常麻煩,愛思考的工程師們希望可以在頁面上通過代理工具動態新增按鈕方便測試(重新整理和清除快取),效果圖如下.

配置

Charles 配置,進入選單 Tools -> Rewrite

目標地址和規則配置

詳細配置(注意細節)

然後在下面的替換規則裡面，雙擊開啟，按圖配置

<div onclick="location.reload(true)" style="position: fixed; z-index: 9999; left: 0; top: 30%; padding: 1% 3%; background: rgba(255,255,255,1); opacity: .7; box-shadow: 1px 1px 3px rgba(0,0,0,.4)">Reload</div><div onclick="localStorage.clear(); alert('localStorage 已清除')" style="position: fixed; right: 0; top: 30%; padding: 1% 3%; background: rgba(255,255,255,1); opacity: .7; box-shadow: 1px 1px 3px rgba(0,0,0,.4); z-index: 9999">Clear</div></body>
複製程式碼

Value 裡面的內容是上面的內容 all done

原理

攔截所有請求,凡是返回結果中包含</body> 都會被替換上面這段 html, 這一段 html 裡面新增了兩個按鈕並且設定了事件,達到我們的目的.

Q&A

• https 沒效果? Proxy->SSL Proxy Setting中新增需要新增按鈕頁面的域名即可.

引用

感謝柯休分享