手機調試 H5（vue 方向）
代碼 bug 多沒關係，關鍵是可以及時定位到問題！
小提示：不知道是不是 fiddler 的原因，不能在微信的網頁注入 JS。所以以下調試均在手機瀏覽器中進行，當然如果可以自己在頁面引入調試資源，那也是可以滴！
手機使用 vue-devtools 調試
開發 vue 應用的時候，chrome/firefox 有
vue-devtools插件。那手機端呢？還有最新的edge瀏覽器，雖然說兼容 chrom 插件，可是也是一番折騰。於是找到了 vue-devtools 的 github 倉庫
先上效果圖：
根據文檔提示，可以用 npm 安裝
# 安裝 vue-devtools
npm install -g @vue/devtools
# 打開vue-devtools
vue-devtools
打開後就能看到我上面的圖的效果，有 2 個 script 標籤，其實都是本地的。這時候最好選擇是 IP 地址的標籤，放入到頁面的 index.html 的 head標籤的第一行！
-
爲啥需要放在 head 的第一行？
文檔也有說，調試插件引入必須在 vue 文件引入之前。所以引入的時候應該是這樣的：
-
其次，只是引入了 JS 文件，PC 端調試是沒問題了，可是手機端一直連不上！
這是因爲，就算採用了 IP 地址的 script。在手機端發送調試請求的時候依舊發送的是
localhost:8098。所以我們還得指定發送調試請求的 IP 地址。
最後改成這樣子：
完整代碼:
<!-- IP地址記得改成你們自己本地的IP -->
<script src="http://192.168.0.105:8098"></script>
<script>
window.__VUE_DEVTOOLS_HOST__ = '192.168.0.105'
window.__VUE_DEVTOOLS_PORT__ = '8098'
</script>
可是這會有一些隱患，萬一項目打包上線咋辦？豈不是每次打開我都得刪除這行代碼，打完包我想調試在把這行代碼放回去？NO NO NO。於是我們找到了 fiddler。動態幫我們注入這段 JS
使用 fiddler 注入 JS
使用 fiddler 固然方便，也不用怕打包上線的時候忘記去掉調試，可是在微信中貌似注入不了，如果有知道怎麼解決的歡迎留言 😃
flddler 的配置後續在出文章把，配置好一切後，找到FiddlerScript 選項，找到 onBeforeResponse。
static function OnBeforeResponse (oSession: Session) {
if (m_Hide304s && oSession.responseCode == 304) {
oSession["ui-hide"] = "true";
}
// 新增部分 ↓ ↓ ↓
// 這裏的判斷還能根據域名來判斷是否新增，太折騰了，我就沒去弄了
if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "text/html")) {
oSession.utilDecodeResponse();
oSession.utilReplaceOnceInResponse('<head>', '<head><script src="http://192.168.0.105:8098"></script><script> window.__VUE_DEVTOOLS_HOST__="192.168.0.105";window.__VUE_DEVTOOLS_PORT__ ="8098"</script>', 0);
}
// 新增部分 ↑ ↑ ↑
}
其實就是在請求響應之前，找到 <head> 標籤，替換爲 :<head> 想引入的JS資源。從而達到 JS 注入的效果~
這裏不要忘記了指定 vue-devtools 的請求域名和端口
重點：改完之後，ctrl+s 是沒用的！ 是沒用的！ 是沒用的！。一定要按上面的保存腳本！這樣才能生效
然後到手機上，需要連接代理，這一部分也在新的文章寫把，這裏就不拓展 fiddler 的功能了~
第一次調試可能連接時間比較長，多刷新幾次即可。有條件的還能用 chrom。用數據線來連接頁面，看下到底頁面上被注入了 JS 沒。chrome 調試可以看這篇：chrome 調試手機網頁
進階：vue-devtools + weinre + vconsole
既然已經摺騰到這一步。動態插入 JS 了。何不在進階一步？
衆所周知，vue-devtools 只能調試 vue 相關的節點，查看變量，查看 vuex。可是對於頁面的樣式卻無能爲力。所以我們可以重新搬出 vconsole 甚至可以用上 weinre!
- vconsole
vconsole 沒啥好說的。就是引入資源。new 一個 vConsole
<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
<script>
new vConsole()
</script>
- weinre 則是着重要講講的！
weinre 要基礎要先看這篇文章: 使用 weinre/spy-debugger 調試手機頁面
安裝完成後，我們啓動 weinre 的端口需要注意下面幾個點：
- 不能使用 8090 因爲 vue-devtools 佔用了
- 不能使用 8080 因爲本地開發項目通常用的都是 8080
- 不能使用 8888 因爲 fiddler 佔用了
那，我們直接還是用 9999 端口把，啓動的時候一樣是要指定 IP 啓動，原因上面也說過了，手機調試，必須指定 IP
weinre --boundHost 192.168.0.105 --httpPort 9999
然後同理在 fildder 裏面找到OnBeforeResponse
在這裏我只引入了 vue-devtools 還有 weinre
static function OnBeforeResponse (oSession: Session) {
if (m_Hide304s && oSession.responseCode == 304) {
oSession["ui-hide"] = "true";
}
// 新增部分 ↓ ↓ ↓
if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "text/html")) {
oSession.utilDecodeResponse();
oSession.utilReplaceOnceInResponse('<head>', '<head><script src="http://192.168.0.105:9999/target/target-script-min.js#anonymous"></script><script src="http://192.168.0.105:8098"></script><script> window.__VUE_DEVTOOLS_HOST__="192.168.0.105";window.__VUE_DEVTOOLS_PORT__ ="8098"</script>', 0);
}
// 新增部分 ↑ ↑ ↑
}
如果不用 fiddler。也是在 html 中直接引入對應的資源，在手機上也可以調試，記得在 <head> 下面的第一行就開始引入資源.確保資源在 vue 引入之前就被引入了
這次的調試可能意義不大~因爲 vue-devtools 不能調試線上代碼，在手機端也只能調試 PC 開放出來的端口。不過也算是以防不時之需~。順便熟悉下 fiddler 的流程
最後最後，放上調試終極效果圖，可以調試節點，調試樣式，使用控制檯功能，查看 vue 的變量，並且被調試的終端是手機~
最後
如果發現調試不了，一定要好好檢查下上面的流程，尤其是 vue 調試，必須額外的指定 IP 地址。好好的把流程都過一遍，不能跳着跳着看，會很容易就漏掉一些步驟
第一次調試固然麻煩，可是把流程都配置好後，現在我只需要打開 fiddler。無需 5S。立刻可以開始調試了~
如果流程有誤或者有更好的方法的，歡迎留言 😃