通过inspect在电脑的Chrome上查看手机上的H5,以及通过vConsole调试移动端的h5

通过inspect调试

首先打开手机的开发者模式，（在连续点击7次版本号，系统会提示已经打开开发者模式）

然后打开一个手机浏览器。

然后在电脑上打开chrome://inspect/#devices。这是就会出现手机上浏览器相应的链接，点击inspect弹出一个新窗口就可以查看代码了。还有就是电脑要可以翻墙的。

如果chrome://inspect/#devices调试H5的时候一直是一片空白,看下是不是native没有打开debug。
如果是native没有打开debug,就需要app端,native打开webview调试。具体代码WebView.setWebContentsDebuggingEnabled(true);

可以调试传统的浏览器H5,也可以调试cordova里面的H5,APP里面的H5.

 

通过vConsole调试

在index.html中添加这两行,如果有jquery报错的话,记得房子jquery上面引用

<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
<script>
    var vConsole = new VConsole();
</script>

再次在手机上打开h5会看到vconsole的标签,打开这个标签就可以看到日志信息