针对产线的H5，如何正确配置vconsole
场景
目前产线的H5，插入到不同的APP里；
遇到一个场景，产线有问题，但是自测验证测试环境没问题，想排查下后端问题或者JS是否有异常，需要vconsole或者eruda
目前现状
- 这个APP对抓包有限制啊，我没有办法抓包，搞不定
- 产线没有vconsole，也没有eruda，一眼抹黑，搞不懂
解决方案
无法抓包的问题
理解要纠正：APP对抓包限制，不是限制所有域名，特别是外部的H5链接的域名，他们不会去限制。
他们一般限制的是自己域内的域名，针对其他域名，人家也不会care.
这种情况，如何正确使用charles呢？
- 点击proxy-> Recording Settings ->Include ->Add
把你需要抓包的壹钱包域名配置上去，一般来说，主要是
m.xxx.com
pro.xxx.com
- 针对Port 大家写443
-
针对Path，Query，大家都写*
如下图所示：
image.png
如果这样设置，只有m-uat.com的域名会被抓包，其他的都放过，也就不存在无法抓包的情况。
如何为产线的H5设置vconsole
Tools -> Rewrite ->Enable Rewrite
点击 Add ，进入一个子窗体 -> Name ： 你随便写一个，可以用域名区分
- 设置需要替换的域名，一般我们的HTML都在m.yqb.com下，我们可以设置这个域名即可
- TYPE选择 “Body”，选择“Response", Match选择Value里填入
<head>
Replace里value的填入（你自己也也可以换成eruda,或者其他版本的vconsole):
<head><script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script><script>var vConsole = new VConsole();</script>
这个标签做正则匹配
保存即可，具体参考下图
进入rewrite.png
=====
设置替换.png
原理
本质提示就是替换HTML里面的内容，加上 一个远程的文件，其他的场景也可以这么做
我们也可以通过 Tools ==> Map Remote add添加链接替换，直接把产线链接换为测试或者uat链接。
链接替换.png
感谢阅读，写本文想告诉大家，遇到产线调试不方便，借助charles抓包工具可以轻松解决
网友评论