為了幫助開發(fā)人員更方便，更安全地開發(fā)和調(diào)試基于微信的網(wǎng)頁，微信引入了Web開發(fā)人員工具。它是一個(gè)模擬微信客戶端性能的桌面應(yīng)用程序，允許開發(fā)人員使用此工具在PC或Mac上輕松開發(fā)和調(diào)試。立即下載體驗(yàn)

你可以：

使用您自己的微信調(diào)試微信網(wǎng)頁授權(quán)調(diào)試，驗(yàn)證JS-SDK相關(guān)的頁面功能和權(quán)限，模擬大多數(shù)SDK的輸入和輸出，并使用集成的Chrome DevTools協(xié)助開發(fā)移動(dòng)調(diào)試功能基于weinre

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

頂部菜單欄是一個(gè)統(tǒng)一的條目，用于執(zhí)行刷新，返回和選定的地址欄等操作，以及微信客戶端版本的模擬設(shè)置頁面。左邊是微信的webview模擬器，它可以直接操作網(wǎng)頁來模擬用戶的真實(shí)行為。右上角是地址欄，用于輸入要調(diào)試的頁面的鏈接，以及清除緩存按鈕。右下方是相關(guān)的請(qǐng)求和返回結(jié)果，以及調(diào)試界面和登錄按鈕。

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

在開發(fā)基于微信的網(wǎng)頁授權(quán)功能時(shí)，開發(fā)人員通常需要在手機(jī)上輸入U(xiǎn)RL以獲取用戶信息以進(jìn)行開發(fā)和調(diào)試。然而，由于移動(dòng)電話的限制，這個(gè)過程非常不方便。通過使用微信 Web開發(fā)人員工具，開發(fā)人員可以直接在PC或Mac上執(zhí)行此操作。具體步驟如下：

開發(fā)人員可以在調(diào)試器中單擊“登錄”并使用移動(dòng)微信掃描代碼登錄并使用真實(shí)用戶身份來開發(fā)和調(diào)試微信網(wǎng)頁授權(quán)。請(qǐng)確認(rèn)手機(jī)登錄頁面，公共號(hào)碼為“微信 web開發(fā)工具”，如下圖所示：

為了確保開發(fā)人員身份信息的安全性，對(duì)于想要調(diào)試的公共號(hào)碼，我們要求開發(fā)人員微信與之建立綁定關(guān)系。具體操作如下：公共號(hào)碼登錄管理后臺(tái)，啟用開發(fā)人員中心，并將綁定邀請(qǐng)發(fā)送到開發(fā)人員工具—— Web開發(fā)人員工具頁面上的開發(fā)人員微信。綁定頁面如下所示：

開發(fā)人員接受電話微信上的邀請(qǐng)以完成綁定。每個(gè)公共號(hào)碼可以同時(shí)綁定到最多10個(gè)開發(fā)人員微信。邀請(qǐng)確認(rèn)頁面如下所示：

登錄和綁定后，開發(fā)人員可以開始調(diào)試微信網(wǎng)頁授權(quán)：

非靜默授權(quán)URL：https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx841a97238d9e17b2&redirect_uri=http://cps.dianping.com/weiXinRedirect&response_type=code&scope=snsapi_userinfo&state=type%3Dquan% 2Curl％3Dhttp％3A％2F％2Fmm.dianping.com％2Fweixin％2Faccount％2Fhome

在微信 Web開發(fā)人員工具中打開此URL，webview模擬器顯示效果，如下所示：

單擊“確認(rèn)登錄”，將用戶信息跳轉(zhuǎn)到第三方頁面，便于后續(xù)開發(fā)和調(diào)試。

靜默授權(quán)的URL：https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx841a97238d9e17b2&redirect_uri=http://cps.dianping.com/weiXinRedirect&response_type=code&scope=snsapi_base&state=type%3Dquan%2Curl ％3Dhttp％3A％2F％2Fmm.dianping.com％2Fweixin％2Faccount％2Fhome

在微信 Web開發(fā)人員工具中打開URL將自動(dòng)跳轉(zhuǎn)到第三方頁面。

模擬JSSDK權(quán)限檢查

通過Web開發(fā)人員工具，您可以在微信客戶端中模擬JSSDK請(qǐng)求，并直觀地查看身份驗(yàn)證結(jié)果和日志。以微信 JSSDK DEMO頁面為例：

http://demo.open.weixin.qq.com/jssdk

在調(diào)試器中打開URL，您可以在右側(cè)的JS-SDK選項(xiàng)卡中輕松查看當(dāng)前頁面wx.config和JSSDK調(diào)用日志的校驗(yàn)和。以下是驗(yàn)證頁面：

以下是驗(yàn)證失敗的頁面：

在“權(quán)限列表”選項(xiàng)卡中，您可以查詢對(duì)當(dāng)前頁面具有權(quán)限的JS-SDK列表：

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

移動(dòng)調(diào)試功能基于weinre，并且經(jīng)過改進(jìn)，比直接使用weinre有兩個(gè)優(yōu)勢：

您不必手動(dòng)將weinre調(diào)試腳本添加到頁面。您可以在weinre Web請(qǐng)求頁面中查看完整的http請(qǐng)求日志，而不僅限于ajax請(qǐng)求

如下圖所示：

Chrome DevTools

微信 Web開發(fā)人員工具與Chrome DevTools集成。與之前在PC上的調(diào)試經(jīng)驗(yàn)一致，您可以快速入門。

如下圖所示：

下載地址

最新版本：（2016.01.11）0.1.0

Windows 64位版本：下載地址

MD5: 04cf4723256b82a284c008bd76b4c67d

Windows 32位版本：下載地址

MD5: 64f21471fcb10cededfb07b5174a7d02

Mac版：下載地址

MD5: 761465844c55d4c61a001d668578f84a標(biāo)簽:＆amp; nbsp＆amp; nbsp一元云購＆amp; nbsp微信一元云購＆amp; nbsp一元云購系統(tǒng)