來源:http://www.cnblogs.com/Leo_wl/p/5983030.html

前幾天寫了一篇使用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 驅動

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

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

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

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

??

（2）開始調試

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

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

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

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

?

?

下面我來補充一下：

3-2-1.打開我們手機的調試USB調試功能，我的手機是三星S7，（高版本Android好像都這么弄，如果你的不可以，就問問度娘）找了半天沒找到，問了度娘才找到。。。。寫個記錄

在下拉通知欄里面選擇設置，如圖：

? ? ?? ? ?? ? ?? ? ?

在版本號那里多點擊幾次，頁面就會有提醒，再點擊幾次就可以打開開發者選項，打開以后，在我們設置里面就出現了開發者選項，點進去，把USB調試打開就好了。

額外內容----如何關閉開發者選項？？？如圖所示

? ??? ??? ??? ??

?

3-2-2打開 X5 Blink 內核的 inspector 功能

? ? ? ? ? ? ?打開微信 web 開發者工具，選擇“移動調試”tab ，使用設備掃描“調試步驟”中的二維碼。如下圖，勾選“是否打開 TBS 內核 Inspector 調試功能”，并重啟微信。

?

3-2-3開始調試

? ? 上面的設置都弄完以后，點擊頁面的的開始調試按鈕，手機上出現下面這個頁面，如圖，我們點擊確定就可以。

?

然后我們的調試工具就會彈出這個頁面：

此時基本上就可以了，我們在我們的手機上隨意打開一個我們要調試的微信公眾號的頁面。如圖

打開以后如圖所示：左側是我們的調試工具頁面，右側是我們的手機上顯示的頁面，是不是非常棒，哈哈哈哈，

? ? ? ? ? ?

?

點擊調試工具頁面右上角的手機圖標，可以將手機頁面映射到調試工具里面，如圖所示：

總結

以上是生活随笔為你收集整理的微信web开发者工具调试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。