微信現在成為了國內即通訊的NO.1了,很多開發者可能需要對微信的網頁進行開發和調試,用手機工作的話很不方便,所以微信公眾平臺專為開發者打造了這款微信開發者工具,它是在電腦桌面上模擬微信客戶端,更方便開發者對微信頁面進行開發和調試!
微信開發者工具是干嘛的
為幫助開發者更方便、更安全地開發和調試基于微信的網頁,我們推出了 開發者工具。它是一個桌面應用,通過模擬微信客戶端的表現,使得開發者可以使用這個工具方便地在 PC 或者 Mac 上進行開發和調試工作。
微信開發者工具界面介紹
該工具界面主要由幾大部分組成,如下圖所示:
頂部菜單欄是刷新、后退、選中地址欄等動作的統一入口,以及微信客戶端版本的模擬設置頁。左側是微信的 view 模擬器,可以直接操作網頁,模擬用戶真實行為。右側上方是地址欄,用于輸入待調試的頁面鏈接,以及清除緩存按鈕。右側下方是相關的請求和返回結果,以及調試界面和登錄按鈕。
微信開發者工具怎么用
1、使用真實用戶身份,調試微信網頁授權。
2、校驗頁面的JSSDK權限,以及模擬大部分SDK的輸入和輸出。
3、利用集成的Chrome DevTools和基本的移動調試模塊,協助開發。
微信開發者工具特色功能
模擬JSSDK權限校驗
通過 開發者工具,可以模擬 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
微信 開發者工具集成了 Chrome DevTools。同之前在 PC 上的調試體驗一致,可以快速上手。
如下圖所示:
- PC官方版
- 安卓官方手機版
- IOS官方手機版