針對(duì)產(chǎn)線的H5，如何正確配置vconsole
場(chǎng)景
目前產(chǎn)線的H5，插入到不同的APP里；
遇到一個(gè)場(chǎng)景，產(chǎn)線有問題，但是自測(cè)驗(yàn)證測(cè)試環(huán)境沒問題，想排查下后端問題或者JS是否有異常，需要vconsole或者eruda
目前現(xiàn)狀
- 這個(gè)APP對(duì)抓包有限制啊，我沒有辦法抓包，搞不定
- 產(chǎn)線沒有vconsole，也沒有eruda，一眼抹黑，搞不懂
解決方案
無(wú)法抓包的問題
理解要糾正：APP對(duì)抓包限制，不是限制所有域名，特別是外部的H5鏈接的域名，他們不會(huì)去限制。
他們一般限制的是自己域內(nèi)的域名，針對(duì)其他域名，人家也不會(huì)care.
這種情況，如何正確使用charles呢？
- 點(diǎn)擊proxy-> Recording Settings ->Include ->Add
把你需要抓包的壹錢包域名配置上去，一般來(lái)說，主要是
m.xxx.com
pro.xxx.com
- 針對(duì)Port 大家寫443
-
針對(duì)Path，Query，大家都寫*
如下圖所示：
image.png
如果這樣設(shè)置，只有m-uat.com的域名會(huì)被抓包，其他的都放過，也就不存在無(wú)法抓包的情況。
如何為產(chǎn)線的H5設(shè)置vconsole
Tools -> Rewrite ->Enable Rewrite
點(diǎn)擊 Add ，進(jìn)入一個(gè)子窗體 -> Name ： 你隨便寫一個(gè)，可以用域名區(qū)分
- 設(shè)置需要替換的域名，一般我們的HTML都在m.yqb.com下，我們可以設(shè)置這個(gè)域名即可
- 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>
這個(gè)標(biāo)簽做正則匹配
保存即可，具體參考下圖
進(jìn)入rewrite.png
=====
設(shè)置替換.png
原理
本質(zhì)提示就是替換HTML里面的內(nèi)容，加上 一個(gè)遠(yuǎn)程的文件，其他的場(chǎng)景也可以這么做
我們也可以通過 Tools ==> Map Remote add添加鏈接替換，直接把產(chǎn)線鏈接換為測(cè)試或者uat鏈接。
鏈接替換.png
感謝閱讀，寫本文想告訴大家，遇到產(chǎn)線調(diào)試不方便，借助charles抓包工具可以輕松解決
