天天看點

通過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的标簽,打開這個标簽就可以看到日志資訊

繼續閱讀