微信web開(kāi)發(fā)者工具

概述

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

你可以：

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

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

3.使用基于 weinre 的移動(dòng)調(diào)試功能，支持 X5 Blink 內(nèi)核的遠(yuǎn)程調(diào)試

4.利用集成的 Chrome DevTools 協(xié)助開(kāi)發(fā)

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

頂部菜單欄是刷新、后退、選中地址欄等動(dòng)作的統(tǒng)一入口，以及微信客戶(hù)端版本的模擬設(shè)置頁(yè)。左側(cè)是微信的 webview 模擬器，可以直接操作網(wǎng)頁(yè)，模擬用戶(hù)真實(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)而獲取用戶(hù)信息，從而進(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)試了。具體操作步驟為：

1.開(kāi)發(fā)者可以在調(diào)試器中點(diǎn)擊“登錄”，使用手機(jī)微信掃碼登錄，從而使用真實(shí)的用戶(hù)身份（支持測(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ā)者工具”，如下圖所示：

2.為了保證開(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è)面如下圖所示：

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

4.完成登錄和綁定后，開(kāi)發(fā)者就可以開(kāi)始調(diào)試微信網(wǎng)頁(yè)授權(quán)了，注意只能調(diào)試自己綁定過(guò)的公眾號(hà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 開(kāi)發(fā)者工具中打開(kāi)類(lèi)似的授權(quán)頁(yè) URL（樣例不可直接使用，請(qǐng)更換為綁定完成的公眾號(hào)授權(quán)頁(yè)URL），webview 模擬器顯示效果如圖：

點(diǎn)擊“確認(rèn)登錄”即可帶著用戶(hù)信息跳轉(zhuǎn)到第三方頁(yè)面，很方便的進(jìn)行后續(xù)的開(kāi)發(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 開(kāi)發(fā)者工具中打開(kāi)類(lèi)似的授權(quán)頁(yè) URL（樣例不可直接使用，請(qǐng)更換為綁定完成的公眾號(hào)授權(quán)頁(yè)URL）則會(huì)自動(dòng)跳轉(zhuǎn)到第三方頁(yè)面。

注意：如果使用了代理，需代理本身支持https直連，才能調(diào)試https頁(yè)面。

模擬JSSDK權(quán)限校驗(yàn)

通過(guò) web 開(kāi)發(fā)者工具，可以模擬 JSSDK 在微信客戶(hù)端中的請(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 中，可以查詢(xún)到當(dāng)前頁(yè)面擁有權(quán)限的 JS-SDK 列表：

結(jié)合左側(cè)的微信 Webview 模擬器，可以直觀地調(diào)試 JSSDK 的效果，如使用微信 web 開(kāi)發(fā)者工具調(diào)試卡券 JSSDK Demo：

http://203.195.235.76:8080/jssdk/wxcardDemo.php

注意：0.7.0 及以后版本的微信 web 開(kāi)發(fā)者工具支持卡券 JSSDK 的調(diào)試，但對(duì)于希望調(diào)試的卡券公眾號(hào)，我們要求開(kāi)發(fā)者微信號(hào)與之建立綁定關(guān)系，綁定流程同授權(quán)登錄一致。

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

移動(dòng)端網(wǎng)頁(yè)的表現(xiàn)，通常和桌面瀏覽器上有所區(qū)別，包括樣式的呈現(xiàn)、腳本的邏輯等等，這會(huì)給開(kāi)發(fā)者帶來(lái)一定的困擾。現(xiàn)在，微信安卓客戶(hù)端 webview 已經(jīng)開(kāi)始全面升級(jí)至 X5 Blink 內(nèi)核，新的內(nèi)核無(wú)論在渲染能力、API 支持還是在開(kāi)發(fā)輔助上都有很大進(jìn)步。通過(guò)微信 web 開(kāi)發(fā)者工具中的遠(yuǎn)程調(diào)試功能，實(shí)時(shí)映射手機(jī)屏幕到微信 web 開(kāi)發(fā)者工具上，將幫助開(kāi)發(fā)者更高效地調(diào)試 X5 Blink 內(nèi)核的網(wǎng)頁(yè)，具體步驟如下：

（1）準(zhǔn)備工作

1. 安裝0.5.0或以上版本的微信 web 開(kāi)發(fā)者工具

2. 確認(rèn)移動(dòng)設(shè)備是否支持遠(yuǎn)程調(diào)試功能

  打開(kāi)微信 web 開(kāi)發(fā)者工具，選擇“移動(dòng)調(diào)試”tab，點(diǎn)擊驗(yàn)證移動(dòng)設(shè)備是否支持。隨后使用移動(dòng)設(shè)備掃描彈出的二維碼，在設(shè)備上即可獲得支持信息。

3. 打開(kāi)移動(dòng)設(shè)備中的 USB 調(diào)試功能

  1.打開(kāi)移動(dòng)設(shè)備，進(jìn)入“設(shè)置”->“開(kāi)發(fā)人員選項(xiàng)”

  2.勾選“USB 調(diào)試功能”

  需要注意的是，Android 4.2 之后的設(shè)備，開(kāi)發(fā)人員選項(xiàng)默認(rèn)是隱藏的，通過(guò)以下步驟可以打開(kāi)：

  1.打開(kāi)移動(dòng)設(shè)備，進(jìn)入“設(shè)置”->“關(guān)于手機(jī)”

  2.找到并單擊“內(nèi)部版本號(hào)”7次

4. 安裝移動(dòng)設(shè)備 USB 驅(qū)動(dòng)

  通常開(kāi)發(fā)者可以在移動(dòng)設(shè)備廠(chǎng)商的官網(wǎng)中下載到相關(guān)驅(qū)動(dòng)，或者使用騰訊手機(jī)管家來(lái)安裝設(shè)備驅(qū)動(dòng)。

5. 打開(kāi) X5 Blink 內(nèi)核的 inspector 功能

  打開(kāi)微信 web 開(kāi)發(fā)者工具，選擇“移動(dòng)調(diào)試”tab ，使用設(shè)備掃描“調(diào)試步驟”中的二維碼。

  如下圖，勾選“是否打開(kāi) TBS 內(nèi)核 Inspector 調(diào)試功能”，并重啟微信。

（2）開(kāi)始調(diào)試

使用 USB 數(shù)據(jù)線(xiàn)連接移動(dòng)設(shè)備與 PC 或者 Mac 后，點(diǎn)擊打開(kāi)微信 web 開(kāi)發(fā)者工具“移動(dòng)調(diào)試”tab，選擇 X5 Blink 調(diào)試功能，將會(huì)打開(kāi)一個(gè)新窗口，在微信中訪(fǎng)問(wèn)任意網(wǎng)頁(yè)即可開(kāi)始調(diào)試。關(guān)于 X5 Blink 內(nèi)核更多信息，可以查看官網(wǎng)介紹。

在所有準(zhǔn)備工作都完成的情況下，窗口中可以看到當(dāng)前設(shè)備的基本信息：

點(diǎn)擊任意頁(yè)面的“inspect”，打開(kāi)新窗口，開(kāi)發(fā)者會(huì)看到熟悉的調(diào)試界面：

點(diǎn)擊上圖右上角的“手機(jī)”圖標(biāo)，將啟用屏幕映射功能：

微信 web 開(kāi)發(fā)者工具集成的移動(dòng)調(diào)試功能，基于 weinre 并做了一些改進(jìn)，相比直接使用 weinre 有兩個(gè)優(yōu)點(diǎn)：

1.無(wú)須手工在頁(yè)面中加入 weinre 調(diào)試腳本

2.可以在 weinre 的網(wǎng)絡(luò)請(qǐng)求頁(yè)卡中，看到完整的 http 請(qǐng)求 log，非局限于 ajax 請(qǐng)求

如下圖所示：

注意，移動(dòng)調(diào)試功能暫不支持 https。

Chrome DevTools

微信 web 開(kāi)發(fā)者工具集成了 Chrome DevTools。同之前在 PC 上的調(diào)試體驗(yàn)一致，可以快速上手。

如下圖所示：

下載地址

最新版本： (2016.05.19) 0.7.0

更新內(nèi)容：

1.新增對(duì)卡券 JSSDK 的調(diào)試支持

2.修復(fù)個(gè)別情況下網(wǎng)絡(luò)出錯(cuò)的問(wèn)題

3.修復(fù)個(gè)別情況下 JSSDK 鑒權(quán)失敗的問(wèn)題

4.其他體驗(yàn)優(yōu)化以及 bug 修復(fù)

Windows 64位版本：下載地址

 MD5: 2e054987a0dabc967a39f2f0a4949e2b

Windows 32位版本：下載地址

 MD5: 956946b0c0b19532ee622d38968effbf

Mac版本：下載地址

 MD5: f078bc88cf433d0b73f4b2aded9bec65

注：支持 Windows XP、win7 及以上版本，支持OS X 10.8 及以上版本

技術(shù)支持與反饋

郵箱地址：weixin-open@qq.com

郵件主題：【微信web開(kāi)發(fā)者工具反饋】

郵件內(nèi)容說(shuō)明：

1.請(qǐng)用簡(jiǎn)明的語(yǔ)言描述問(wèn)題所在，并交代清楚遇到該問(wèn)題的場(chǎng)景，可附上截屏圖片，微信團(tuán)隊(duì)會(huì)盡快處理你的反饋。

2.請(qǐng)附帶微信 web 開(kāi)發(fā)者工具 log 文件，關(guān)閉調(diào)試工具之后，在以下路徑中找到相關(guān)文件，并作為郵件附件發(fā)送：

  windows系統(tǒng)下在

    C:\Users\<用戶(hù)名>\AppData\Local\微信web開(kāi)發(fā)者工具\(yùn)User Data\微信web開(kāi)發(fā)者工具.log

  mac系統(tǒng)下在

    /Users/<用戶(hù)名>/Library/Application Support/微信web開(kāi)發(fā)者工具/微信web開(kāi)發(fā)者工具.log