微信web开发者工具调试
來源:http://www.cnblogs.com/Leo_wl/p/5983030.html
前幾天寫了一篇使用fiddler調(diào)試微信端頁面的，然后博友評論說使用fiddler太麻煩了，推薦使用微信web開發(fā)者工具調(diào)試微信頁面，這兩天弄著玩了一下，很強大。這篇文章只是做一個記錄，方便自己以后使用的時候看看，不對的地方請大家批評指正。放入官方的微信web開發(fā)者工具下載鏈接以及文檔說明https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html，參考這個文檔，我又給細節(jié)化了一些內(nèi)容。下載以后直接安裝就好。
1.下載安裝好以后，打開界面是這樣的。
?
?
2.我們點擊登錄，會出現(xiàn)掃描二維碼頁面，用你自己的微信掃一下登錄就可以
??
?
3.登錄以后，就可以對我們的微信企業(yè)號頁面進行調(diào)試，請注意！！！要想調(diào)試當(dāng)前的企業(yè)號頁面，你登錄的微信號，必須是這個企業(yè)號的管理員（這在微信開發(fā)者工具的說明文檔有寫），如果不是，請在你們的企業(yè)號開發(fā)端把你的微信設(shè)置為管理員。否則在開發(fā)者工具里面將會出現(xiàn)下面這個頁面，如圖
?
? ?管理員設(shè)置界面如圖：
? ?
?
在企業(yè)號管理頁面添加完畢以后，會在你的手機微信端有提醒，記得按照他的提醒設(shè)置一下開發(fā)者工具的登陸密碼，如果沒有設(shè)置密碼，你依然登陸不上去，如圖所示：
?
設(shè)置完密碼以后，我們點擊登錄，發(fā)現(xiàn)還是上不去，如圖所示：
?
點進去以后，如圖所示：
?
2.上面所有的都設(shè)置過以后，我們登陸開發(fā)工具，隨意打開一個公眾號的頁面，復(fù)制鏈接放在開發(fā)工具的地址欄，現(xiàn)在基本上就可以在電腦上面進行調(diào)試了。頁面如圖：（關(guān)注一下移動調(diào)試）
?
3.這個工具更加強大的功能！點擊窗口中的移動調(diào)試。
? 3-1.如圖所示，我們先選擇Android設(shè)備調(diào)試--普通調(diào)試，
??
?
?
? 接著我們只要按照他的提示--調(diào)試步驟設(shè)置我們的手機就可以，手機代理設(shè)置如圖所示：
?
手機設(shè)置完畢代理以后，點擊開發(fā)者工具頁面中的開始調(diào)試就可以，很強大，我們選中的頁面部分，會在手機上面實時顯示出來。（自己體驗一下。）
? 3-2.如圖所示，我們先選擇Android設(shè)備調(diào)試--X5 Blink內(nèi)核調(diào)試，這個功能更強大！
這一部分強烈建議看一下官網(wǎng)的文檔說明，我先copy一下放在這。
移動調(diào)試
移動端網(wǎng)頁的表現(xiàn)，通常和桌面瀏覽器上有所區(qū)別，包括樣式的呈現(xiàn)、腳本的邏輯等等，這會給開發(fā)者帶來一定的困擾。現(xiàn)在，微信安卓客戶端 webview 已經(jīng)開始全面升級至 X5 Blink 內(nèi)核，新的內(nèi)核無論在渲染能力、API 支持還是在開發(fā)輔助上都有很大進步。通過微信 web 開發(fā)者工具中的遠程調(diào)試功能，實時映射手機屏幕到微信 web 開發(fā)者工具上，將幫助開發(fā)者更高效地調(diào)試 X5 Blink 內(nèi)核的網(wǎng)頁，具體步驟如下：
（1）準(zhǔn)備工作
1. 安裝0.5.0或以上版本的微信 web 開發(fā)者工具
2. 確認移動設(shè)備是否支持遠程調(diào)試功能
? 打開微信 web 開發(fā)者工具，選擇“移動調(diào)試”tab，點擊驗證移動設(shè)備是否支持。隨后使用移動設(shè)備掃描彈出的二維碼，在設(shè)備上即可獲得支持信息。
3. 打開移動設(shè)備中的 USB 調(diào)試功能
? 1.打開移動設(shè)備，進入“設(shè)置”->“開發(fā)人員選項”
? 2.勾選“USB 調(diào)試功能”
?
? 需要注意的是，Android 4.2 之后的設(shè)備，開發(fā)人員選項默認是隱藏的，通過以下步驟可以打開：
? 1.打開移動設(shè)備，進入“設(shè)置”->“關(guān)于手機”
? 2.找到并單擊“內(nèi)部版本號”7次
4. 安裝移動設(shè)備 USB 驅(qū)動
? 通常開發(fā)者可以在移動設(shè)備廠商的官網(wǎng)中下載到相關(guān)驅(qū)動，或者使用騰訊手機管家來安裝設(shè)備驅(qū)動。
5. 打開 X5 Blink 內(nèi)核的 inspector 功能
? 打開微信 web 開發(fā)者工具，選擇“移動調(diào)試”tab ，使用設(shè)備掃描“調(diào)試步驟”中的二維碼。
? 如下圖，勾選“是否打開 TBS 內(nèi)核 Inspector 調(diào)試功能”，并重啟微信。
??
（2）開始調(diào)試
使用 USB 數(shù)據(jù)線連接移動設(shè)備與 PC 或者 Mac 后，點擊打開微信 web 開發(fā)者工具“移動調(diào)試”tab，選擇 X5 Blink 調(diào)試功能，將會打開一個新窗口，在微信中訪問任意網(wǎng)頁即可開始調(diào)試。關(guān)于 X5 Blink 內(nèi)核更多信息，可以查看官網(wǎng)介紹。
在所有準(zhǔn)備工作都完成的情況下，窗口中可以看到當(dāng)前設(shè)備的基本信息：
點擊任意頁面的“inspect”，打開新窗口，開發(fā)者會看到熟悉的調(diào)試界面：
點擊上圖右上角的“手機”圖標(biāo)，將啟用屏幕映射功能：
?
?
下面我來補充一下：
3-2-1.打開我們手機的調(diào)試USB調(diào)試功能，我的手機是三星S7，（高版本Android好像都這么弄，如果你的不可以，就問問度娘）找了半天沒找到，問了度娘才找到。。。。寫個記錄
在下拉通知欄里面選擇設(shè)置，如圖：
? ? ?? ? ?? ? ?? ? ?
在版本號那里多點擊幾次，頁面就會有提醒，再點擊幾次就可以打開開發(fā)者選項，打開以后，在我們設(shè)置里面就出現(xiàn)了開發(fā)者選項，點進去，把USB調(diào)試打開就好了。
額外內(nèi)容----如何關(guān)閉開發(fā)者選項？？？如圖所示
? ??? ??? ??? ??
?
3-2-2打開 X5 Blink 內(nèi)核的 inspector 功能
? ? ? ? ? ? ?打開微信 web 開發(fā)者工具，選擇“移動調(diào)試”tab ，使用設(shè)備掃描“調(diào)試步驟”中的二維碼。如下圖，勾選“是否打開 TBS 內(nèi)核 Inspector 調(diào)試功能”，并重啟微信。
?
3-2-3開始調(diào)試
? ? 上面的設(shè)置都弄完以后，點擊頁面的的開始調(diào)試按鈕，手機上出現(xiàn)下面這個頁面，如圖，我們點擊確定就可以。
?
然后我們的調(diào)試工具就會彈出這個頁面：
此時基本上就可以了，我們在我們的手機上隨意打開一個我們要調(diào)試的微信公眾號的頁面。如圖
打開以后如圖所示：左側(cè)是我們的調(diào)試工具頁面，右側(cè)是我們的手機上顯示的頁面，是不是非常棒，哈哈哈哈，
? ? ? ? ? ?
?
點擊調(diào)試工具頁面右上角的手機圖標(biāo)，可以將手機頁面映射到調(diào)試工具里面，如圖所示：
總結(jié)
以上是生活随笔為你收集整理的微信web开发者工具调试的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 白鱼（说一说白鱼的简介）
- 下一篇： 白兰（说一说白兰的简介）