移動端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的使用方式請去倉庫查看！

調試：

面板：

其實和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工具

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调试了
复制代码

---