爲幫助開發者更方便、更安全地開發和調試基於微信的網頁,我們推出了 web 開發者工具。它是一個桌面應用,通過模擬微信客戶端的表現,使得開發者可以使用這個工具方便地在 PC 或者 Mac 上進行開發和調試工作。
你可以:
- 使用自己的微信號來調試微信網頁授權
- 調試、檢驗頁面的 JS-SDK 相關功能與權限,模擬大部分 SDK 的輸入和輸出
- 使用基於 weinre 的移動調試功能
- 利用集成的 Chrome DevTools 協助開發
該工具界面主要由幾大部分組成,如下圖所示:
頂部菜單欄是刷新、後退、選中地址欄等動作的統一入口,以及微信客戶端版本的模擬設置頁。左側是微信的 webview 模擬器,可以直接操作網頁,模擬用戶真實行爲。右側上方是地址欄,用於輸入待調試的頁面鏈接,以及清除緩存按鈕。右側下方是相關的請求和返回結果,以及調試界面和登錄按鈕。
調試微信網頁授權
之前在開發基於微信的網頁授權的功能時,開發者通常需要手機上輸入 URL 進而獲取用戶信息,從而進行開發和調試工作,可是因爲手機的諸多限制,這個過程很不方便。通過使用微信 web 開發者工具,從此開發者可以直接在 PC 或者 Mac 上進行這種調試了。具體操作步驟爲:
- 開發者可以在調試器中點擊“登錄”,使用手機微信掃碼登錄,從而使用真實的用戶身份(支持測試號)來開發和調試微信網頁授權。請確認手機登錄頁,綁定的公衆號爲“微信 web 開發者工具”,如下圖所示:
- 爲了保證開發者身份信息的安全,對於希望調試的公衆號,我們要求開發者微信號與之建立綁定關係。具體操作爲:公衆號登錄管理後臺,啓用開發者中心,在開發者工具——web 開發者工具頁面,向開發者微信號發送綁定邀請。綁定頁面如下圖所
- 開發者在手機微信上接受邀請,即可完成綁定。每個公衆號最多可同時綁定10個開發者微信號。邀請確認頁面如下圖所示:
- 完成登錄和綁定後,開發者就可以開始調試微信網頁授權了,注意只能調試自己綁定過的公衆號:
在微信 web 開發者工具中打開類似的授權頁 URL(樣例不可直接使用,請更換爲綁定完成的公衆號授權頁 URL),webview 模擬器顯示效果如圖:
點擊“確認登錄”即可帶着用戶信息跳轉到第三方頁面,很方便的進行後續的開發和調試。
在微信 web 開發者工具中打開類似的授權頁 URL(樣例不可直接使用,請更換爲綁定完成的公衆號授權頁 URL)則會自動跳轉到第三方頁面。
注意:如果使用了代理,需代理本身支持https直連,才能調試https頁面。
模擬JSSDK權限校驗
通過 web 開發者工具,可以模擬 JSSDK 在微信客戶端中的請求,並直觀地看到鑑權結果和 log。以微信 JSSDK DEMO 頁面爲例:
http://demo.open.weixin.qq.com/jssdk
在調試器中打開該 URL,可以方便地在右側的 JS-SDK Tab 中看到當前頁面 wx.config 的校驗情況和 JSSDK 的調用 log。 如下是校驗通過的頁面:
如下是校驗未通過的頁面:
在“權限列表” Tab 中,可以查詢到當前頁面擁有權限的 JS-SDK 列表:
移動調試
移動調試功能是基於 weinre 的,並且做了一些改進,相比直接使用 weinre 有兩個優點:
- 無須手工在頁面中加入 weinre 調試腳本
- 可以在 weinre 的網絡請求頁卡中,看到完整的 http 請求 log,非侷限於 ajax 請求
如下圖所示:
注意,移動調試功能暫不支持https。
Chrome DevTools
微信 web 開發者工具集成了 Chrome DevTools。同之前在 PC 上的調試體驗一致,可以快速上手。
如下圖所示:
下載地址
最新版本: (2016.2.22) 0.3.0
更新內容:
- 修復部分已知的 bug
- 新增支持微信企業號
Windows 64位版本:下載地址
MD5: e74dd9499379ad93c68a952133eb7116
Windows 32位版本:下載地址
MD5: b69a7d94a045430a1d8216950cb27199
Mac版本:下載地址
MD5: 4024846d39293b492cec0d83edd97b73
注:支持 win7 及以上版本,支持OS X 10.8 及以上版本
相關網址:https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html