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

引用

感谢柯休分享