為幫助開發(fā)者更方便、更安全地開發(fā)和調(diào)試基于微信的網(wǎng)頁，微信推出了 web 開發(fā)者工具。它是一個桌面應(yīng)用，通過模擬微信客戶端的表現(xiàn)，使得開發(fā)者可以使用這個工具方便地在 PC 或者 Mac 上進(jìn)行開發(fā)和調(diào)試工作。你可以：

使用自己的微信號來調(diào)試微信網(wǎng)頁授權(quán)
調(diào)試、檢驗頁面的 JS-SDK 相關(guān)功能與權(quán)限，模擬大部分 SDK 的輸入和輸出
使用基于 weinre 的移動調(diào)試功能
利用集成的 Chrome DevTools 協(xié)助開發(fā)

該工具界面主要由幾大部分組成，如下圖所示：

http://wiki.jikexueyuan.com/project/java-wechat/images/45.jpg" alt="" />

頂部菜單欄是刷新、后退、選中地址欄等動作的統(tǒng)一入口，以及微信客戶端版本的模擬設(shè)置頁。左側(cè)是微信的 webview 模擬器，可以直接操作網(wǎng)頁，模擬用戶真實行為。右側(cè)上方是地址欄，用于輸入待調(diào)試的頁面鏈接，以及清除緩存按鈕。右側(cè)下方是相關(guān)的請求和返回結(jié)果，以及調(diào)試界面和登錄按鈕。

（一）調(diào)試微信網(wǎng)頁授權(quán)

之前在開發(fā)基于微信的網(wǎng)頁授權(quán)的功能時，開發(fā)者通常需要手機上輸入 URL 進(jìn)而獲取用戶信息，從而進(jìn)行開發(fā)和調(diào)試工作，可是因為手機的諸多限制，這個過程很不方便。通過使用微信 web 開發(fā)者工具，從此開發(fā)者可以直接在 PC 或者 Mac 上進(jìn)行這種調(diào)試了。具體操作步驟為：

1.開發(fā)者可以在調(diào)試器中點擊“登錄”，使用手機微信掃碼登錄，從而使用真實的用戶身份（支持測試號）來開發(fā)和調(diào)試微信網(wǎng)頁授權(quán)。請確認(rèn)手機登錄頁，綁定的公眾號為“微信 web 開發(fā)者工具”，如下圖所示：

http://wiki.jikexueyuan.com/project/java-wechat/images/46.jpg" alt="" />

2.為了保證開發(fā)者身份信息的安全，對于希望調(diào)試的公眾號，我們要求開發(fā)者微信號與之建立綁定關(guān)系。具體操作為：公眾號登錄管理后臺，啟用開發(fā)者中心，在開發(fā)者工具——web 開發(fā)者工具頁面，向開發(fā)者微信號發(fā)送綁定邀請。綁定頁面如下圖所示：

http://wiki.jikexueyuan.com/project/java-wechat/images/47.jpg" alt="" />

3.開發(fā)者在手機微信上接受邀請，即可完成綁定。每個公眾號最多可同時綁定 10 個開發(fā)者微信號。邀請確認(rèn)頁面如下圖所示：

http://wiki.jikexueyuan.com/project/java-wechat/images/48.jpg" alt="" />

4.完成登錄和綁定后，開發(fā)者就可以開始調(diào)試微信網(wǎng)頁授權(quán)了，注意只能調(diào)試自己綁定過的公眾號，在微信 web 開發(fā)者工具中打開類似的授權(quán)頁 URL，webview 模擬器顯示效果如圖：

http://wiki.jikexueyuan.com/project/java-wechat/images/49.png" alt="" />

（二）模擬 JSSDK 權(quán)限校驗

通過 web 開發(fā)者工具，可以模擬 JSSDK 在微信客戶端中的請求，并直觀地看到鑒權(quán)結(jié)果和 log。以微信 JSSDK DEMO 頁面為例：http://demo.open.weixin.qq.com/jssdk 在調(diào)試器中打開該 URL，可以方便地在右側(cè)的 JS-SDK Tab 中看到當(dāng)前頁面 wx.config 的校驗情況和 JSSDK 的調(diào)用 log。如下是校驗通過的頁面：

http://wiki.jikexueyuan.com/project/java-wechat/images/50.jpg" alt="" />

如下是校驗未通過的頁面：

http://wiki.jikexueyuan.com/project/java-wechat/images/51.jpg" alt="" />

在“權(quán)限列表” Tab 中，可以查詢到當(dāng)前頁面擁有權(quán)限的 JS-SDK 列表：

http://wiki.jikexueyuan.com/project/java-wechat/images/52.jpg" alt="" />

（三）移動調(diào)試

我移動調(diào)試從來就沒有成功過，所以這里不做說明！

（四）Chrome DevTools

微信 web 開發(fā)者工具集成了 Chrome DevTools。同之前在 PC 上的調(diào)試體驗一致，可以快速上手。如下圖所示：

http://wiki.jikexueyuan.com/project/java-wechat/images/53.jpg" alt="" />

下載地址：http://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html#.E4.B8.8B.E8.BD.BD.E5.9C.B0.E5.9D.80

微信 web 開發(fā)者工具使用的簡單介紹就到這里，感謝你的翻閱，如果你有所疑問可以留言討論！

上一篇：　Java 微信公眾平臺開發(fā)(十二)--微信用戶信息的獲取下一篇：Java 微信公眾平臺開發(fā)(六)--微信開發(fā)中的 token 獲取