使用微信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 驅動

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

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開始調試

    上面的設置都弄完之後，點擊頁面的的開始調試按鈕，手機上出現下面這個頁面，如圖，咱們點擊肯定就能夠。

 

而後咱們的調試工具就會彈出這個頁面：

此時基本上就能夠了，咱們在咱們的手機上隨意打開一個咱們要調試的微信公衆號的頁面。如圖

打開之後如圖所示：左側是咱們的調試工具頁面，右側是咱們的手機上顯示的頁面，是否是很是棒，哈哈哈哈，

           

 

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