微信Web開發(fā)者利器來調試一元云購項目
為幫助開發(fā)者更方便、更安全地開發(fā)和調試基于微信的網(wǎng)頁，微信推出了 web 開發(fā)者工具。它是一個桌面應用，通過模擬微信客戶端的表現(xiàn)，使得開發(fā)者可以使用這個工具方便地在 PC 或者 Mac 上進行開發(fā)和調試工作。立即下載體驗
你可以：
- 使用自己的微信號來調試微信網(wǎng)頁授權
- 調試、檢驗頁面的 JS-SDK 相關功能與權限，模擬大部分 SDK 的輸入和輸出
- 使用基于 weinre 的移動調試功能
- 利用集成的 Chrome DevTools 協(xié)助開發(fā)
該工具界面主要由幾大部分組成，如下圖所示：
頂部菜單欄是刷新、后退、選中地址欄等動作的統(tǒng)一入口，以及微信客戶端版本的模擬設置頁。左側是微信的 webview 模擬器，可以直接操作網(wǎng)頁，模擬用戶真實行為。右側上方是地址欄，用于輸入待調試的頁面鏈接，以及清除緩存按鈕。右側下方是相關的請求和返回結果，以及調 試界面和登錄按鈕。
調試微信網(wǎng)頁授權
之前在開發(fā)基于微信的網(wǎng)頁授權的功能時，開發(fā)者通常需要手機上輸入 URL 進而獲取用戶信息，從而進行開發(fā)和調試工作，可是因為手機的諸多限制，這個過程很不方便。 通過使用微信 web 開發(fā)者工具，從此開發(fā)者可以直接在 PC 或者 Mac 上進行這種調試了。具體操作步驟為：
- 開發(fā)者可以在調試器中點擊“登錄”，使用手機微信掃碼登錄，從而使用真實的用戶身份來開發(fā)和調試微信網(wǎng)頁授權。請確認手機登錄頁，綁定的公眾號為“微信 web 開發(fā)者工具”，如下圖所示：
- 為了保證開發(fā)者身份信息的安全，對于希望調試的公眾號，我們要求開發(fā)者微信號與之建立綁定關系。具體操作為：公眾號登錄管理后臺，啟用開發(fā)者中心，在開發(fā)者工具——web 開發(fā)者工具頁面，向開發(fā)者微信號發(fā)送綁定邀請。綁定頁面如下圖所示：
- 開發(fā)者在手機微信上接受邀請，即可完成綁定。每個公眾號最多可同時綁定10個開發(fā)者微信號。邀請確認頁面如下圖所示：
- 完成登錄和綁定后，開發(fā)者就可以開始調試微信網(wǎng)頁授權了：
在微信 web 開發(fā)者工具中打開這個 URL，webview 模擬器顯示效果如圖：
點擊“確認登錄”即可帶著用戶信息跳轉到第三方頁面，很方便的進行后續(xù)的開發(fā)和調試。
在微信 web 開發(fā)者工具中打開該 URL 則會自動跳轉到第三方頁面。
模擬JSSDK權限校驗
通過 web 開發(fā)者工具，可以模擬 JSSDK 在微信客戶端中的請求，并直觀地看到鑒權結果和 log。以微信 JSSDK DEMO 頁面為例：
http://demo.open.weixin.qq.com/jssdk
在調試器中打開該 URL，可以方便地在右側的 JS-SDK Tab 中看到當前頁面 wx.config 的校驗情況和 JSSDK 的調用 log。 如下是校驗通過的頁面：
如下是校驗未通過的頁面：
在“權限列表” Tab 中，可以查詢到當前頁面擁有權限的 JS-SDK 列表：
移動調試
移動調試功能是基于 weinre 的，并且做了一些改進，相比直接使用 weinre 有兩個優(yōu)點：
- 無須手工在頁面中加入 weinre 調試腳本
- 可以在 weinre 的網(wǎng)絡請求頁卡中，看到完整的 http 請求 log，非局限于 ajax 請求
如下圖所示：
Chrome DevTools
微信 web 開發(fā)者工具集成了 Chrome DevTools。同之前在 PC 上的調試體驗一致，可以快速上手。
如下圖所示：
下載地址
最新版本： (2016.01.11) 0.1.0
Windows 64位版本：下載地址
MD5: 04cf4723256b82a284c008bd76b4c67d
Windows 32位版本：下載地址
MD5: 64f21471fcb10cededfb07b5174a7d02
Mac版本：下載地址
MD5: 761465844c55d4c61a001d668578f84a
穩(wěn)定
產(chǎn)品高可用性高并發(fā)貼心
項目群及時溝通專業(yè)
產(chǎn)品經(jīng)理1v1支持快速
MVP模式小步快跑承諾
我們選擇聲譽堅持
10年專注高端品質開發(fā)