前言
微信公眾號網頁開發的真機調試一直是很頭疼的事情。
原因一
微信公眾號配置的JS安全域名只有三個，一個大中型的公眾號這三個JS安全域名都是生產的域名，不可能預留域名用于開發和調試。
原因二
在微信里面只有訪問正確的安全域名才能調用wx.config用來調用微信的接口。調試器和真機有差異。
原因三
在實際的開發中我們不可能寫一部分代碼上傳到生產的服務器上再用真機調試，這樣是非常麻煩的事情。
解決方案
通過微信里面的鏈接訪問本地的前端服務進行真機調試。
思考
第一步是搞定微信開發者工具的調試流程。
雖然支付等特殊場景在開發者工具上不方便測試，但是搞通開發者工具的調試流程也足夠應對大部分場景了。
我們知道，微信首先會檢查域名，那我們就從域名上下功夫。
先說一個不知道算不算冷門的知識：webpack 的 devServer 可以指定 host 為一個域名，Vite Server 同樣也可以。port 參數也可以指定為 80。
基于此，假設我們的線上域名是baidu.com，我們可以先在本地開發時指定 host 為baidu.com, port 為 80。
此時我們打開瀏覽器通過http://baidu.com:80這個地址訪問，80 端口是 http 的默認端口，所以帶不帶 80 其實都一樣，此時我們的請求會根據 DNS 解析訪問到線上服務器，由于代理服務器配置了 301 重定向，http 80 端口的請求會被重定向到 https 443 端口，
所以瀏覽器會再發起一次請求到https://baidu.com，最終得到的響應還是來源于我們的線上環境。
有的讀者可能就會問了，既然 devServer host 配置了線上域名，但最終的請求還是轉到線上的機器去了，那這對我本地調試來說有什么意義？
這就要搞清楚 DNS 的解析流程是怎么回事了。我們知道，IP 對應的服務器才是真正提供服務的，域名只不過是一個名字，而 DNS 服務就是負責把域名解析到 IP 上的。
而 DNS 解析的第一道關口就是本機的 hosts 文件，hosts 文件中找不到的記錄，才會往 DNS 服務器去找。
那我們只要把 hosts 文件給改了，讓juejin.cn解析到我本地的 IP 不就行了嗎？我們來試試。
第一步和第二步是設置要調試的合法域名與本地之間的代理
第三步和第四部是設置本地抓真機的包
四步連通就達到真機調試本地公眾號網頁項目的目的
step1：設置項目端口，獲取本地IP
必須把項目本地代理設為80端口（也就是默認端口），否則訪問鏈接存在端口字段就無法通過微信域名校驗
// 本地代理server: {host: '0.0.0.0',port: 80, // 設置服務啟動端口號open: false, // 設置服務啟動時是否自動打開瀏覽器cors: true, // 允許跨域https: false, // 開啟https協議// 設置代理，根據項目實際情況配置proxy: {'/welife': {target:'https://daojiach.hstypay.com',changeOrigin: true,secure: false,// rewrite: (path) => path.replace('/welife/', '/'),},},},
npm run dev的時候終端會顯示出本地IP，在終端運行IPconfig也可以獲取到。
圖片中 192.xxx.xxx.xxx 是本地IP地址。
step2：更改hosts文件，獲取本地IP地址
hosts 文件在 Windows 操作系統中通常是位于C:\Windows\System32\drivers\etc目錄下，我們修改一下這個文件，加入一條記錄，接著需要用管理員權限保存。
127.0.0.1 daojiach.hstypay.com
這樣本地訪問daojiach.hstypay.com/manage/就等于訪問我的本地192.xxx.xxx.xxx:80/manage/了。
step3：安裝fiddler，進行配置
現在開始操作手機與本地之間的抓包
安裝 Fiddler
去官網安裝，不要去奇怪的網站，或者找我要安裝包
安裝后打開
進行Fiddler配置
監聽端口默認8888
菜單欄Tools => Fiddler Options 對話框切換到Connections選項卡 勾選Allowromote computers to connect
信任根證書
可能會遇到無法上網的情況，所以下面這個建議勾選
以下三小步為小芳Fillder使用教程引用部分
默認我們能抓到的都是http請求，但越來越多的網站都使用了更安全的https協議，要怎樣抓到https的請求呢？讓我們一起來設置一下吧
第一步：菜單欄 Tools=》Options=>HTTPS=>勾選Capture HTTPS CONNECTs 點擊Actions選擇導出證書到桌面。
第二步：Win+R打開運行，輸入certmgr.msc，找到受信任的根證書頒發機構，將Fiddler證書導入
第三步：重啟Fiddler
這時我們就能抓到https的包了o(￣▽￣)ブ
PC端的包對我們來說瀏覽器的network就夠用了，手機端的請求卻沒有地方可以看，這時候Fiddler就派上用場了。在一切皆可抓的Fiddler面前移動端抓包自然不是問題，如何操作呢
step4：手機抓包步驟
第一步：確定本地的ip地址
第二步：申請公司IT06手機內網權限，通過后跟劉星說明需要手機swiftpass-m和電腦swiftpass抓包通信
第三步：打開手機
第四步：
android: 設備的設置 =》WLAN 鏈接 代理-> 手動→輸入電腦的ip地址→端口8888
打開瀏覽器訪問配置好的IP:端口，下載fiddler的CA證書并到設置里將下載下來的CA證書進行安裝
IOS: 相對Android增加一步 設置=》通用=》關于本機=》證書信任設置=》“DO_NOT_TRUST_FiddlerRoot”修改右側開關=》設置為開啟狀態
第五步：手機隨便訪問某個網頁，在fiddler中可以看到完成的請求和響應數據
step5:大功告成
現在 手機微信里面 訪問http://daojiach.hstypay.com/manage/就會訪問電腦上的前端服務192.xxx.xxx.xxx:80/manage/，并且是熱重載。通過更改前端服務器的轉發地址就可以變化訪問后端服務器。 這樣就很方便調試了。
)
