移動端H5真機調試方案

今年入職了一家做直播的公司,主要是負責APP中內嵌webview頁面的開發,之前移動端兼容經驗比較少,對於我來說最大的困擾就是網頁兼容性問題。

在Chrome瀏覽器的模擬器進行開發調試已經完美完成了需求之後,一到驗收或者上線,就出現各種兼容引起的bug,要解決還特別曲折,不僅要探索Android和iOS手機的不同調試方式,還要支持在不同瀏覽器或者APP上調試,極大的影響了開發的效率。

雖然我們也可以通過模擬器進行開發調試,但模擬終究是模擬,在某些場景下真機還是不可或缺,尤其是特定機型版本的問題。

一般情況下,真機Web調試要怎麼做呢?

一、vConsole

npm地址: github.com/Tencent/vCo…

介紹: vConsole插件是一個移動端輕量可擴展的工具,其功能和電腦端的控制台基本一致,能運行JS代碼、查看cookie、抓包等

使用: 在head中添加如下代碼即可

<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
<script>
   // 初始化
   var vConsole = new VConsole();
   console.log("hello vconsole");
</script>
复制代码

如果是想通過npm安裝或者對於TypeScript的使用方式請去倉庫查看!

調試: vConsole

面板: 報錯

其實和console控制台一樣,打開一個頁面的時候,下方會出現一個綠色的“vConsole”按鈕,點擊按鈕即可打開控制台,在“log”頁面中輸入JS代碼,即可執行腳本,“Network”頁面為分析網絡會話列表,“System”頁面顯示協議頭User-Agent、系統信息網絡狀態等信息,“Storage”頁面為cookie信息等

二、Eruda

npm地址: github.com/liriliri/er…

介紹: Eruda 是一個專為前端移動端、移動端設計的調試面板,類似Chrome DevTools 的迷你版(沒有chrome強大這個是可以肯定的),其主要功能包括:捕獲console 日誌、檢查元素狀態、顯示性能指標、捕獲XHR請求、顯示本地存儲和Cookie信息、瀏覽器特性檢測等等。

使用: 在head中添加如下代碼即可

<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
复制代码

Eruda 的使用方法和麵板跟vConsole差不多,更詳細的使用方法可去官方倉庫查看!

三、Fildder

下載地址: www.telerik.com/fiddler

介紹: Fiddler是最強大最好用的Web調試工具之一,它能記錄所有客戶端和服務器的http和https請求,允許你監視,設置斷點,甚至修改輸入輸出數據,Fiddler無論對開發人員或者測試人員來說,都是非常有用的工具

使用: 1、下載安裝並配置好fillder工具 fildder工具

2、手機和fildder鏈接同一個網絡,然後手機開啟手動代理並安裝證書

a.配置手動代理 配置代理

b.下載證書手機瀏覽器地址輸入代理的主機名和端口(10.0,5.155::8888) 下載證書

c.安裝證書 安裝

上面步驟完成後然後打開H5頁面,如果能在fildder抓到頁面資源表示抓包成功

3、然後線上或則測試環境有問題的相關文件或者頁面代理到本地調試 抓包代理步驟

AutoResponder不僅可以代理文件,還能代理接口返回等,代理成功後就可以在本地文件中debugger斷點一步步調試,找出線上真機出現的問題

四、調試本地Vue項目步驟

1、手机和fildder软件同一个网络

2、手机网络设置手动代理,ip为电脑网络的ipv4地址,端口为fiddler设置的端口默认8080

3、手机浏览器输入代理的地址+端口,安装证书

4、本地项目跑起来,如果是域名访问的,则需要配置hosts

5、手机打开访问的地址就可以debugger调试了
复制代码

 

作者:Liben
链接:https://juejin.cn/post/6907546374422659079
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.