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

