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

你可以：

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

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

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

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

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

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

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

開發(fā)人員接受電話微信上的邀請以完成綁定。每個公共號碼可以同時綁定到最多10個開發(fā)人員微信。邀請確認頁面如下所示：

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

非靜默授權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模擬器顯示效果，如下所示：

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

靜默授權的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將自動跳轉(zhuǎn)到第三方頁面。

模擬JSSDK權限檢查

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

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

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

以下是驗證失敗的頁面：

在“權限列表”選項卡中，您可以查詢對當前頁面具有權限的JS-SDK列表：

移動調(diào)試

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

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

如下圖所示：

Chrome DevTools

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

如下圖所示：

下載地址

最新版本：（2016.01.11）0.1.0

Windows 64位版本：下載地址

MD5: 04cf4723256b82a284c008bd76b4c67d

Windows 32位版本：下載地址

MD5: 64f21471fcb10cededfb07b5174a7d02

Mac版：下載地址

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