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

    使用自己的微信號(hào)來(lái)調(diào)試微信網(wǎng)頁(yè)授權(quán)

    調(diào)試、檢驗(yàn)頁(yè)面的 js-sdk 相關(guān)功能與權(quán)限，模擬大部分 sdk 的輸入和輸出

    使用基于 weinre 的移動(dòng)調(diào)試功能

    利用集成的 chrome devtools 協(xié)助開(kāi)發(fā) 

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

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

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

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

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

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

③開(kāi)發(fā)者在手機(jī)微信上接受邀請(qǐng)，即可完成綁定。每個(gè)公眾號(hào)最多可同時(shí)綁定10個(gè)開(kāi)發(fā)者微信號(hào)。邀請(qǐng)確認(rèn)頁(yè)面如下圖所示：

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

（二）模擬jssdk權(quán)限校驗(yàn)

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

如下是校驗(yàn)未通過(guò)的頁(yè)面：

在“權(quán)限列表” tab 中，可以查詢到當(dāng)前頁(yè)面擁有權(quán)限的 js-sdk 列表：

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

我移動(dòng)調(diào)試從來(lái)就沒(méi)有成功過(guò)，所以這里不做說(shuō)明！

（四）chrome devtools

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

下載地址：http://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html#.e4.b8.8b.e8.bd.bd.e5.9c.b0.e5.9d.80 

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。

原文鏈接：http://www.cuiyongzhi.com/post/58.html