H5頁面真機調(diào)試
場景：測試真機兼容性問題、測試真機調(diào)用原生功能（如拍照）。
問題：這些無法在瀏覽器模擬測試，需要直接在真機上驗證。嵌套在app的h5頁面，想要查看手機瀏覽器信息是非常困難的事，當(dāng)出現(xiàn)問題時，查不到日志，通過alert打印日志一遍遍定位bug效率太低，還會阻攔進(jìn)程。
解決方案：
1、使用移動端調(diào)試神器vconsole。
2、使用方法：
①在項目中下載vconsole。
npm install vconsole
②項目入口html文件中引入
<!-- 調(diào)試 -->
<script src="/webapp/assets/vconsole.min.js"></script>
<script>
var vConsole=new VConsole();
</script>
③運行后顯示如圖所示，可以看到log日志、Network網(wǎng)絡(luò)請求等。
vconsole.png
vconsole2.png
④下載Fiddler應(yīng)用，打開應(yīng)用（調(diào)試時Fiddler要保持打開狀態(tài)），配置端口：Tools->Options...->Connections->Fiddler listens on port: 8888
fiddler.png
⑤打開手機連接局域網(wǎng)WiFi，設(shè)置wifi為手動配置代理，配置服務(wù)器（本機IPv4地址）和端口，例如
手動：√
服務(wù)器：192.XXX.XX.XX //本機ip
端口：8888
