爲 Charles 添加代理頁面按鈕(Rewrite)

背景

測試環境 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中添加須要添加按鈕頁面的域名便可.

引用

感謝柯休分享