为 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中添加须要添加按钮页面的域名便可.

引用

感谢柯休分享