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

概述

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

你可以：

1.使用自己的微信號來調試微信網(wǎng)頁授權

2.調試、檢驗頁面的 JS-SDK 相關功能與權限，模擬大部分 SDK 的輸入和輸出

3.使用基于 weinre 的移動調試功能，支持 X5 Blink 內核的遠程調試

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

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

頂部菜單欄是刷新、后退、選中地址欄等動作的統(tǒng)一入口，以及微信客戶端版本的模擬設置頁。左側是微信的 webview 模擬器，可以直接操作網(wǎng)頁，模擬用戶真實行為。右側上方是地址欄，用于輸入待調試的頁面鏈接，以及清除緩存按鈕。右側下方是相關的請求和返回結果，以及調試界面和登錄按鈕。

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

之前在開發(fā)基于微信的網(wǎng)頁授權的功能時，開發(fā)者通常需要手機上輸入 URL 進而獲取用戶信息，從而進行開發(fā)和調試工作，可是因為手機的諸多限制，這個過程很不方便。 通過使用微信 web 開發(fā)者工具，從此開發(fā)者可以直接在 PC 或者 Mac 上進行這種調試了。具體操作步驟為：

1.開發(fā)者可以在調試器中點擊“登錄”，使用手機微信掃碼登錄，從而使用真實的用戶身份（支持測試號）來開發(fā)和調試微信網(wǎng)頁授權。請確認手機登錄頁，綁定的公眾號為“微信 web 開發(fā)者工具”，如下圖所示：

2.為了保證開發(fā)者身份信息的安全，對于希望調試的公眾號，我們要求開發(fā)者微信號與之建立綁定關系。具體操作為：公眾號登錄管理后臺，啟用開發(fā)者中心，在開發(fā)者工具——web 開發(fā)者工具頁面，向開發(fā)者微信號發(fā)送綁定邀請。綁定頁面如下圖所示：

3.開發(fā)者在手機微信上接受邀請，即可完成綁定。每個公眾號最多可同時綁定10個開發(fā)者微信號。邀請確認頁面如下圖所示：

4.完成登錄和綁定后，開發(fā)者就可以開始調試微信網(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（樣例不可直接使用，請更換為綁定完成的公眾號授權頁URL），webview 模擬器顯示效果如圖：

點擊“確認登錄”即可帶著用戶信息跳轉到第三方頁面，很方便的進行后續(xù)的開發(fā)和調試。

靜默授權的 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（樣例不可直接使用，請更換為綁定完成的公眾號授權頁URL）則會自動跳轉到第三方頁面。

注意：如果使用了代理，需代理本身支持https直連，才能調試https頁面。

模擬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 列表：

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

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

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

移動調試

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

（1）準備工作

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

2. 確認移動設備是否支持遠程調試功能

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

3. 打開移動設備中的 USB 調試功能

  1.打開移動設備，進入“設置”->“開發(fā)人員選項”

  2.勾選“USB 調試功能”

  需要注意的是，Android 4.2 之后的設備，開發(fā)人員選項默認是隱藏的，通過以下步驟可以打開：

  1.打開移動設備，進入“設置”->“關于手機”

  2.找到并單擊“內部版本號”7次

4. 安裝移動設備 USB 驅動

  通常開發(fā)者可以在移動設備廠商的官網(wǎng)中下載到相關驅動，或者使用騰訊手機管家來安裝設備驅動。

5. 打開 X5 Blink 內核的 inspector 功能

  打開微信 web 開發(fā)者工具，選擇“移動調試”tab ，使用設備掃描“調試步驟”中的二維碼。

  如下圖，勾選“是否打開 TBS 內核 Inspector 調試功能”，并重啟微信。

（2）開始調試

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

在所有準備工作都完成的情況下，窗口中可以看到當前設備的基本信息：

點擊任意頁面的“inspect”，打開新窗口，開發(fā)者會看到熟悉的調試界面：

點擊上圖右上角的“手機”圖標，將啟用屏幕映射功能：

微信 web 開發(fā)者工具集成的移動調試功能，基于 weinre 并做了一些改進，相比直接使用 weinre 有兩個優(yōu)點：

1.無須手工在頁面中加入 weinre 調試腳本

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

如下圖所示：

注意，移動調試功能暫不支持 https。

Chrome DevTools

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

如下圖所示：

下載地址

最新版本： (2016.05.19) 0.7.0

更新內容：

1.新增對卡券 JSSDK 的調試支持

2.修復個別情況下網(wǎng)絡出錯的問題

3.修復個別情況下 JSSDK 鑒權失敗的問題

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ā)者工具反饋】

郵件內容說明：

1.請用簡明的語言描述問題所在，并交代清楚遇到該問題的場景，可附上截屏圖片，微信團隊會盡快處理你的反饋。

2.請附帶微信 web 開發(fā)者工具 log 文件，關閉調試工具之后，在以下路徑中找到相關文件，并作為郵件附件發(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