在vue开发中，我们一般都是在浏览器中进行H5页面的绘制和网络请求，等开发完成后再部署到服务器端用手机进行测试。在开发过程中难免遇到用Charles抓取H5页面请求后端数据，更改报文进行不同情况下UI渲染的需求，以下就以Chrome浏览器为例详细介绍怎么实现上述需求。
1，运行npm run dev以后浏览器的默认域名是localhost,请求的后端数据也被代理到了相同的域名下，Charles默认不能抓取localhost域名下的请求，因此将localhost域名更改为 localhost.charlesproxy.com，其它都不用改；
2，勾选Charles ——> Proxy ——> macOS Proxy;
3，以上两个步骤完成以后就能够在Charles中看到浏览器发出的请求了，可以像访问普通的url链接一样进行断点设置，但是请求超时时间太短，以至于来不及更改response数据就导致后端请求canceled。我们项目中请求用的是axios，可以设置axios的超时时间axios.defaults.timeout长一点，就可以顺利地抓包改数据啦！
ps: H5的开发过程都是在浏览器中，那么在不发版的情况下怎么通过手机请求node起的本机服务进行手机端适配呢，主要有以下两种方法：
1，手机浏览器：将localhost替换成本机的ip地址，记住要带上端口号
2，手机的其它App，由于App的webview和浏览器的有区别，如果想在App查看h5页面效果，有的App可能会禁用本机ip地址的请求。这时候我们可以借助Charles抓包工具，将App允许的域名转发到localhost或者
localhost.charlesproxy.com都可以，这样当代码有改动浏览器自动更新的时候手机也会同步更新，是不是很方便。
