微信web開發者工具調試

前幾天寫了一篇使用fiddler調試微信端頁面的，然后博友評論說使用fiddler太麻煩了，推薦使用微信web開發者工具調試微信頁面，這兩天弄着玩了一下，很強大。這篇文章只是做一個記錄，方便自己以后使用的時候看看，不對的地方請大家批評指正。放入官方的微信web開發者工具下載鏈接以及文檔說明https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html，參考這個文檔，我又給細節化了一些內容。下載以后直接安裝就好。

1.下載安裝好以后，打開界面是這樣的。

2.我們點擊登錄，會出現掃描二維碼頁面，用你自己的微信掃一下登錄就可以

3.登錄以后，就可以對我們的微信企業號頁面進行調試，請注意！！！要想調試當前的企業號頁面，你登錄的微信號，必須是這個企業號的管理員（這在微信開發者工具的說明文檔有寫），如果不是，請在你們的企業號開發端把你的微信設置為管理員。否則在開發者工具里面將會出現下面這個頁面，如圖

管理員設置界面如圖：

在企業號管理頁面添加完畢以后，會在你的手機微信端有提醒，記得按照他的提醒設置一下開發者工具的登陸密碼，如果沒有設置密碼，你依然登陸不上去，如圖所示：

設置完密碼以后，我們點擊登錄，發現還是上不去，如圖所示：

點進去以后，如圖所示：

2.上面所有的都設置過以后，我們登陸開發工具，隨意打開一個公眾號的頁面，復制鏈接放在開發工具的地址欄，現在基本上就可以在電腦上面進行調試了。頁面如圖：（關注一下移動調試）

3.這個工具更加強大的功能！點擊窗口中的移動調試。

3-1.如圖所示，我們先選擇Android設備調試--普通調試，

接着我們只要按照他的提示--調試步驟設置我們的手機就可以，手機代理設置如圖所示：

手機設置完畢代理以后，點擊開發者工具頁面中的開始調試就可以，很強大，我們選中的頁面部分，會在手機上面實時顯示出來。（自己體驗一下。）

3-2.如圖所示，我們先選擇Android設備調試--X5 Blink內核調試，這個功能更強大！

這一部分強烈建議看一下官網的文檔說明，我先copy一下放在這。

移動調試

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

（1）准備工作

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

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

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

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

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

2.勾選“USB 調試功能”

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

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

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

4. 安裝移動設備 USB 驅動

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