在微信小程序開(kāi)發(fā)工具（微信開(kāi)發(fā)者工具）中調(diào)試公眾號(hào)網(wǎng)頁(yè)（即微信公眾號(hào)H5網(wǎng)頁(yè)），雖然不像調(diào)試小程序那樣原生支持，但可以通過(guò)以下方法實(shí)現(xiàn)模擬調(diào)試或跳轉(zhuǎn)測(cè)試：
? 一、公眾號(hào)網(wǎng)頁(yè)調(diào)試的正確方式
1. 用瀏覽器 + 真機(jī)調(diào)試結(jié)合
- 公眾號(hào)網(wǎng)頁(yè)本質(zhì)是 H5 頁(yè)面，一般是在微信內(nèi)嵌 WebView 中打開(kāi)的網(wǎng)頁(yè)。
- 微信開(kāi)發(fā)者工具本身不能直接模擬公眾號(hào)H5頁(yè)面環(huán)境，但你可以這樣調(diào)試：
? 二、推薦調(diào)試步驟
?? 方法一：直接用微信瀏覽器訪問(wèn)（真機(jī)調(diào)試）
- 用 HTTPS 部署你的網(wǎng)頁(yè) 微信只允許訪問(wèn) HTTPS 頁(yè)面。
- 綁定公眾號(hào)域名 在「微信公眾號(hào)后臺(tái)」 >「功能」>「JS接口安全域名」中添加你的網(wǎng)站域名。
- 生成調(diào)試鏈接 比如：https://yourdomain.com/page.html
- 用手機(jī)微信直接打開(kāi)調(diào)試鏈接 可以掃碼打開(kāi)，也可以通過(guò)群發(fā)、菜單、開(kāi)發(fā)者工具分享。
? 如果你有 JS-SDK 權(quán)限，可以在網(wǎng)頁(yè)中使用如 wx.config() 進(jìn)行調(diào)試。
?? 方法二：使用 Chrome 開(kāi)發(fā)者工具模擬環(huán)境
- 在 Chrome 里打開(kāi)你的 H5 頁(yè)面。
- 按 F12 打開(kāi)開(kāi)發(fā)者工具，使用設(shè)備模擬功能選擇微信設(shè)備（如 iPhone X）。
- 可以模擬大部分行為（布局、交互、響應(yīng)）。
?? 方法三：在微信開(kāi)發(fā)者工具中使用“公眾號(hào)網(wǎng)頁(yè)項(xiàng)目”
微信開(kāi)發(fā)者工具提供了公眾號(hào)網(wǎng)頁(yè)項(xiàng)目調(diào)試模式：
?? 操作步驟：
- 打開(kāi)微信開(kāi)發(fā)者工具
- 點(diǎn)擊左上角「+」 > 選擇「公眾號(hào)網(wǎng)頁(yè)項(xiàng)目」
- 填寫(xiě)如下信息： AppID：填寫(xiě)你的公眾號(hào) AppID（必須是已認(rèn)證的服務(wù)號(hào)） 項(xiàng)目名稱：隨便填 項(xiàng)目目錄：指向你 H5 項(xiàng)目代碼目錄
- 勾選 “不使用云服務(wù)”
- 點(diǎn)擊「創(chuàng)建」
- 在編輯器中直接打開(kāi)你的 HTML 頁(yè)面，就可以調(diào)試頁(yè)面 JS 和樣式了
?? 注意：這個(gè)方式不會(huì)模擬微信 JS-SDK 的真實(shí)行為，例如分享、支付、定位等需要真機(jī)調(diào)試。
? 三、調(diào)試 JS-SDK 功能的方式（如支付、分享、掃一掃）
- 綁定 JS 接口安全域名（公眾號(hào)后臺(tái)）
- 引入微信 JS-SDK
- 用 wx.config() 初始化調(diào)試參數(shù)
- 通過(guò)手機(jī)微信打開(kāi)網(wǎng)頁(yè)測(cè)試真實(shí)交互
?? 附加工具推薦：
| 工具名稱 | 用途 |
|---|---|
| ngrok / localtunnel | 將本地開(kāi)發(fā)服務(wù)映射為公網(wǎng) HTTPS 地址 |
| Charles / Fiddler | 抓包調(diào)試 |
| 微信官方 JS SDK | 實(shí)現(xiàn)如分享、支付、掃一掃等功能調(diào)試 |
? 小結(jié)
| 場(chǎng)景 | 推薦調(diào)試方式 |
|---|---|
| 頁(yè)面樣式、交互 | Chrome DevTools 或 微信公眾號(hào)網(wǎng)頁(yè)項(xiàng)目 |
| JS-SDK 功能 | 微信內(nèi)真機(jī)調(diào)試 |
| 本地開(kāi)發(fā)調(diào)試（無(wú)域名） | 使用 ngrok 映射 HTTPS 域名，手機(jī)掃碼訪問(wèn) |
