前幾天寫了一篇使用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開始除錯

    上面的設定都弄完以後，點選頁面的的開始除錯按鈕，手機上出現下面這個頁面，如圖，我們點選確定就可以。

然後我們的除錯工具就會彈出這個頁面：

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

開啟以後如圖所示：左側是我們的除錯工具頁面，右側是我們的手機上顯示的頁面，是不是非常棒，哈哈哈哈，

點選除錯工具頁面右上角的手機圖示，可以將手機頁面對映到除錯工具裡面，如圖所示：

 轉載至  https://www.cnblogs.com/Gabriel-Wei/p/5977850.html      Gabriel-Wei