手机h5页面真机调试，vconsole在react中的使用

H5页面真机调试

场景：测试真机兼容性问题、测试真机调用原生功能（如拍照）。

问题：这些无法在浏览器模拟测试，需要直接在真机上验证。嵌套在app的h5页面，想要查看手机浏览器信息是非常困难的事，当出现问题时，查不到日志，通过alert打印日志一遍遍定位bug效率太低，还会阻拦进程。

解决方案：

1、使用移动端调试神器vconsole。

2、使用方法：

①在项目中下载vconsole。

npm install vconsole

②项目入口html文件中引入

<!-- 调试 -->
  <script src="/webapp/assets/vconsole.min.js"></script>
  <script>
    var vConsole=new VConsole();
  </script>

③运行后显示如图所示，可以看到log日志、Network网络请求等。

vconsole.png vconsole2.png

④下载Fiddler应用，打开应用（调试时Fiddler要保持打开状态），配置端口：Tools->Options...->Connections->Fiddler listens on port: 8888

fiddler.png

⑤打开手机连接局域网WiFi，设置wifi为手动配置代理，配置服务器（本机IPv4地址）和端口，例如

手动：√
服务器：192.XXX.XX.XX  //本机ip
端口：8888

以上配置后，就可以轻松在真机上调试啦，而且不仅限于内部app，包括在其他app（如微信）里面的h5页面也可以调试。