手機調試 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。立刻可以開始調試了~
如果流程有誤或者有更好的方法的,歡迎留言 😃