微信web開發(fā)者工具主要用于輔助開發(fā)者簡單高效的開發(fā)和調(diào)試基于微信的網(wǎng)頁或小程序，具備開發(fā)調(diào)試、代碼編輯及程序發(fā)布等功能，讓開發(fā)者更好的在PC或者M(jìn)ac上進(jìn)行開發(fā)和調(diào)試工作。微信web開發(fā)者工具利用集成的Chrome DevTools和基本的移動(dòng)調(diào)試模塊，協(xié)助開發(fā)者進(jìn)行開發(fā)，而且使用非常方便，是開發(fā)者編程的福音！

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

1、使用自己的微信號(hào)來調(diào)試微信網(wǎng)頁授權(quán)
2、調(diào)試、檢驗(yàn)頁面的 JS-SDK 相關(guān)功能與權(quán)限，模擬大部分 SDK 的輸入和輸出
3、使用基于 weinre 的移動(dòng)調(diào)試功能
4、利用集成的 Chrome DevTools 協(xié)助開發(fā)

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

1.到本站下載安裝微信web開發(fā)者工具，打開安裝程序，點(diǎn)擊下一步繼續(xù)安裝

2.點(diǎn)擊我接受此協(xié)議，點(diǎn)擊下一步

3.點(diǎn)擊瀏覽選擇安裝位置

4.稍等片刻

5.最后點(diǎn)擊完成即可，軟件安裝完畢

微信web開發(fā)者工具使用教程

如何使用微信web開發(fā)者工具開發(fā)

1. 開發(fā)者掃碼登錄微信開發(fā)者工具

2. 登錄成功

3. 輸入對(duì)應(yīng)調(diào)試網(wǎng)址，對(duì)應(yīng)操作可在console欄目查看到具體報(bào)錯(cuò)

4. 對(duì)應(yīng)報(bào)錯(cuò)可鼠標(biāo)左鍵點(diǎn)擊或者右鍵“open id a new tab”在一個(gè)新頁面查看報(bào)錯(cuò)

5. 必要的時(shí)候“清空緩存”來清空cookie和瀏覽器緩存造成的影響

6. JS-SDK主要用來調(diào)試微信相關(guān)接口

微信開發(fā)者工具須知

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

你可以：

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

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

使用基于 weinre 的移動(dòng)調(diào)試功能

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

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

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

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

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

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

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

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

完成登錄和綁定后，開發(fā)者就可以開始調(diào)試微信網(wǎng)頁授權(quán)了，注意只能調(diào)試自己綁定過的公眾號(hào)

在微信 web 開發(fā)者工具中打開類似的授權(quán)頁 URL（樣例不可直接使用，請(qǐng)更換為綁定完成的公眾號(hào)授權(quán)頁URL），webview 模擬器顯示效果如圖：

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

在微信 web 開發(fā)者工具中打開類似的授權(quán)頁 URL（樣例不可直接使用，請(qǐng)更換為綁定完成的公眾號(hào)授權(quán)頁URL）則會(huì)自動(dòng)跳轉(zhuǎn)到第三方頁面。

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

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

通過 web 開發(fā)者工具，可以模擬 JSSDK 在微信客戶端中的請(qǐng)求，并直觀地看到鑒權(quán)結(jié)果和 log。

在調(diào)試器中打開該 URL，可以方便地在右側(cè)的 JS-SDK Tab 中看到當(dāng)前頁面 wx.config 的校驗(yàn)情況和 JSSDK 的調(diào)用 log。 如下是校驗(yàn)通過的頁面：

如下是校驗(yàn)未通過的頁面：

在“權(quán)限列表” Tab 中，可以查詢到當(dāng)前頁面擁有權(quán)限的 JS-SDK 列表：

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

移動(dòng)調(diào)試功能是基于 weinre 的，并且做了一些改進(jìn)，相比直接使用 weinre 有兩個(gè)優(yōu)點(diǎn)：

無須手工在頁面中加入 weinre 調(diào)試腳本

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

如下圖所示：

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

Chrome DevTools

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

如下圖所示：