H5頁(yè)面真機(jī)調(diào)試

場(chǎng)景：測(cè)試真機(jī)兼容性問(wèn)題、測(cè)試真機(jī)調(diào)用原生功能（如拍照）。

問(wèn)題：這些無(wú)法在瀏覽器模擬測(cè)試，需要直接在真機(jī)上驗(yàn)證。嵌套在app的h5頁(yè)面，想要查看手機(jī)瀏覽器信息是非常困難的事，當(dāng)出現(xiàn)問(wèn)題時(shí)，查不到日志，通過(guò)alert打印日志一遍遍定位bug效率太低，還會(huì)阻攔進(jìn)程。

解決方案：

1、使用移動(dòng)端調(diào)試神器vconsole。

2、使用方法：

①在項(xiàng)目中下載vconsole。

npm install vconsole

②項(xiàng)目入口html文件中引入

<!-- 調(diào)試 -->
  <script src="/webapp/assets/vconsole.min.js"></script>
  <script>
    var vConsole=new VConsole();
  </script>

③運(yùn)行后顯示如圖所示，可以看到log日志、Network網(wǎng)絡(luò)請(qǐng)求等。

vconsole.png

vconsole2.png

④下載Fiddler應(yīng)用，打開應(yīng)用（調(diào)試時(shí)Fiddler要保持打開狀態(tài)），配置端口：Tools->Options...->Connections->Fiddler listens on port: 8888

fiddler.png

⑤打開手機(jī)連接局域網(wǎng)WiFi，設(shè)置wifi為手動(dòng)配置代理，配置服務(wù)器（本機(jī)IPv4地址）和端口，例如

手動(dòng)：√
服務(wù)器：192.XXX.XX.XX  //本機(jī)ip
端口：8888

以上配置后，就可以輕松在真機(jī)上調(diào)試?yán)?，而且不僅限于內(nèi)部app，包括在其他app（如微信）里面的h5頁(yè)面也可以調(diào)試。