使用微信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開始調試
上面的設定都弄完以後，點選頁面的的開始調試按鈕，手機上出現下面這個頁面，如圖，我們點選确定就可以。
然後我們的調試工具就會彈出這個頁面：
此時基本上就可以了，我們在我們的手機上随意打開一個我們要調試的微信公衆号的頁面。如圖
打開以後如圖所示：左側是我們的調試工具頁面，右側是我們的手機上顯示的頁面，是不是非常棒，哈哈哈哈，
點選調試工具頁面右上角的手機圖示，可以将手機頁面映射到調試工具裡面，如圖所示：
轉載至 https://www.cnblogs.com/Gabriel-Wei/p/5977850.html Gabriel-Wei