微信web開發(fā)者工具
微信web開發(fā)者工具
為幫助開發(fā)者更方便、更安全地開發(fā)和調(diào)試基于微信的網(wǎng)頁，我們推出了 web 開發(fā)者工具。它是一個桌面應用，通過模擬微信客戶端的表現(xiàn)，使得開發(fā)者可以使用這個工具方便地在 PC 或者 Mac 上進行開發(fā)和調(diào)試工作。立即下載體驗
你可以：
1.使用自己的微信號來調(diào)試微信網(wǎng)頁授權(quán)
2.調(diào)試、檢驗頁面的 JS-SDK 相關(guān)功能與權(quán)限，模擬大部分 SDK 的輸入和輸出
3.使用基于 weinre 的移動調(diào)試功能，支持 X5 Blink 內(nèi)核的遠程調(diào)試
4.利用集成的 Chrome DevTools 協(xié)助開發(fā)
該工具界面主要由幾大部分組成，如下圖所示：
頂部菜單欄是刷新、后退、選中地址欄等動作的統(tǒng)一入口，以及微信客戶端版本的模擬設(shè)置頁。左側(cè)是微信的 webview 模擬器，可以直接操作網(wǎng)頁，模擬用戶真實行為。右側(cè)上方是地址欄，用于輸入待調(diào)試的頁面鏈接，以及清除緩存按鈕。右側(cè)下方是相關(guān)的請求和返回結(jié)果，以及調(diào)試界面和登錄按鈕。
之前在開發(fā)基于微信的網(wǎng)頁授權(quán)的功能時，開發(fā)者通常需要手機上輸入 URL 進而獲取用戶信息，從而進行開發(fā)和調(diào)試工作，可是因為手機的諸多限制，這個過程很不方便。 通過使用微信 web 開發(fā)者工具，從此開發(fā)者可以直接在 PC 或者 Mac 上進行這種調(diào)試了。具體操作步驟為：
1.開發(fā)者可以在調(diào)試器中點擊“登錄”，使用手機微信掃碼登錄，從而使用真實的用戶身份（支持測試號）來開發(fā)和調(diào)試微信網(wǎng)頁授權(quán)。請確認手機登錄頁，綁定的公眾號為“微信 web 開發(fā)者工具”，如下圖所示：
2.為了保證開發(fā)者身份信息的安全，對于希望調(diào)試的公眾號，我們要求開發(fā)者微信號與之建立綁定關(guān)系。具體操作為：公眾號登錄管理后臺，啟用開發(fā)者中心，在開發(fā)者工具——web 開發(fā)者工具頁面，向開發(fā)者微信號發(fā)送綁定邀請。綁定頁面如下圖所示：
3.開發(fā)者在手機微信上接受邀請，即可完成綁定。每個公眾號最多可同時綁定10個開發(fā)者微信號。邀請確認頁面如下圖所示：
4.完成登錄和綁定后，開發(fā)者就可以開始調(diào)試微信網(wǎng)頁授權(quán)了，注意只能調(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_userinfo
&state=type%3Dquan%2Curl%3Dhttp%3A%2F%2Fmm.dianping.com%2Fweixin%2Faccount%2Fhome
在微信 web 開發(fā)者工具中打開類似的授權(quán)頁 URL（樣例不可直接使用，請更換為綁定完成的公眾號授權(quán)頁URL），webview 模擬器顯示效果如圖：
點擊“確認登錄”即可帶著用戶信息跳轉(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ā)者工具中打開類似的授權(quán)頁 URL（樣例不可直接使用，請更換為綁定完成的公眾號授權(quán)頁URL）則會自動跳轉(zhuǎn)到第三方頁面。
注意：如果使用了代理，需代理本身支持https直連，才能調(diào)試https頁面。
通過 web 開發(fā)者工具，可以模擬 JSSDK 在微信客戶端中的請求，并直觀地看到鑒權(quán)結(jié)果和 log。以微信 JSSDK DEMO 頁面為例：
http://demo.open.weixin.qq.com/jssdk
在調(diào)試器中打開該 URL，可以方便地在右側(cè)的 JS-SDK Tab 中看到當前頁面 wx.config 的校驗情況和 JSSDK 的調(diào)用 log。 如下是校驗通過的頁面：
如下是校驗未通過的頁面：
在“權(quán)限列表” Tab 中，可以查詢到當前頁面擁有權(quán)限的 JS-SDK 列表：
結(jié)合左側(cè)的微信 Webview 模擬器，可以直觀地調(diào)試 JSSDK 的效果，如使用微信 web 開發(fā)者工具調(diào)試卡券 JSSDK Demo：
http://203.195.235.76:8080/jssdk/wxcardDemo.php
注意：0.7.0 及以后版本的微信 web 開發(fā)者工具支持卡券 JSSDK 的調(diào)試，但對于希望調(diào)試的卡券公眾號，我們要求開發(fā)者微信號與之建立綁定關(guān)系，綁定流程同授權(quán)登錄一致。
移動端網(wǎng)頁的表現(xiàn)，通常和桌面瀏覽器上有所區(qū)別，包括樣式的呈現(xiàn)、腳本的邏輯等等，這會給開發(fā)者帶來一定的困擾?，F(xiàn)在，微信安卓客戶端 webview 已經(jīng)開始全面升級至 X5 Blink 內(nèi)核，新的內(nèi)核無論在渲染能力、API 支持還是在開發(fā)輔助上都有很大進步。通過微信 web 開發(fā)者工具中的遠程調(diào)試功能，實時映射手機屏幕到微信 web 開發(fā)者工具上，將幫助開發(fā)者更高效地調(diào)試 X5 Blink 內(nèi)核的網(wǎng)頁，具體步驟如下：
（1）準備工作
1. 安裝0.5.0或以上版本的微信 web 開發(fā)者工具
2. 確認移動設(shè)備是否支持遠程調(diào)試功能
打開微信 web 開發(fā)者工具，選擇“移動調(diào)試”tab，點擊驗證移動設(shè)備是否支持。隨后使用移動設(shè)備掃描彈出的二維碼，在設(shè)備上即可獲得支持信息。
3. 打開移動設(shè)備中的 USB 調(diào)試功能
1.打開移動設(shè)備，進入“設(shè)置”->“開發(fā)人員選項”
2.勾選“USB 調(diào)試功能”
需要注意的是，Android 4.2 之后的設(shè)備，開發(fā)人員選項默認是隱藏的，通過以下步驟可以打開：
1.打開移動設(shè)備，進入“設(shè)置”->“關(guān)于手機”
2.找到并單擊“內(nèi)部版本號”7次
4. 安裝移動設(shè)備 USB 驅(qū)動
通常開發(fā)者可以在移動設(shè)備廠商的官網(wǎng)中下載到相關(guān)驅(qū)動，或者使用騰訊手機管家來安裝設(shè)備驅(qū)動。
5. 打開 X5 Blink 內(nèi)核的 inspector 功能
打開微信 web 開發(fā)者工具，選擇“移動調(diào)試”tab ，使用設(shè)備掃描“調(diào)試步驟”中的二維碼。
如下圖，勾選“是否打開 TBS 內(nèi)核 Inspector 調(diào)試功能”，并重啟微信。
（2）開始調(diào)試
使用 USB 數(shù)據(jù)線連接移動設(shè)備與 PC 或者 Mac 后，點擊打開微信 web 開發(fā)者工具“移動調(diào)試”tab，選擇 X5 Blink 調(diào)試功能，將會打開一個新窗口，在微信中訪問任意網(wǎng)頁即可開始調(diào)試。關(guān)于 X5 Blink 內(nèi)核更多信息，可以查看官網(wǎng)介紹。
在所有準備工作都完成的情況下，窗口中可以看到當前設(shè)備的基本信息：
點擊任意頁面的“inspect”，打開新窗口，開發(fā)者會看到熟悉的調(diào)試界面：
點擊上圖右上角的“手機”圖標，將啟用屏幕映射功能：
微信 web 開發(fā)者工具集成的移動調(diào)試功能，基于 weinre 并做了一些改進，相比直接使用 weinre 有兩個優(yōu)點：
1.無須手工在頁面中加入 weinre 調(diào)試腳本
2.可以在 weinre 的網(wǎng)絡請求頁卡中，看到完整的 http 請求 log，非局限于 ajax 請求
如下圖所示：
注意，移動調(diào)試功能暫不支持 https。
微信 web 開發(fā)者工具集成了 Chrome DevTools。同之前在 PC 上的調(diào)試體驗一致，可以快速上手。
如下圖所示：
最新版本： (2016.05.19) 0.7.0
更新內(nèi)容：
1.新增對卡券 JSSDK 的調(diào)試支持
2.修復個別情況下網(wǎng)絡出錯的問題
3.修復個別情況下 JSSDK 鑒權(quán)失敗的問題
4.其他體驗優(yōu)化以及 bug 修復
Windows 64位版本：下載地址
MD5: 2e054987a0dabc967a39f2f0a4949e2b
Windows 32位版本：下載地址
MD5: 956946b0c0b19532ee622d38968effbf
Mac版本：下載地址
MD5: f078bc88cf433d0b73f4b2aded9bec65
注：支持 Windows XP、win7 及以上版本，支持OS X 10.8 及以上版本
郵箱地址：weixin-open@qq.com
郵件主題：【微信web開發(fā)者工具反饋】
郵件內(nèi)容說明：
1.請用簡明的語言描述問題所在，并交代清楚遇到該問題的場景，可附上截屏圖片，微信團隊會盡快處理你的反饋。
2.請附帶微信 web 開發(fā)者工具 log 文件，關(guān)閉調(diào)試工具之后，在以下路徑中找到相關(guān)文件，并作為郵件附件發(fā)送：
windows系統(tǒng)下在
C:\Users\<用戶名>\AppData\Local\微信web開發(fā)者工具\User Data\微信web開發(fā)者工具.log
mac系統(tǒng)下在
/Users/<用戶名>/Library/Application Support/微信web開發(fā)者工具/微信web開發(fā)者工具.log