移动端调试最佳实践

因为公司项目的h5页面都是在客户端里面的，有些bug无法用模拟器直接看出来，故去网上找了一些在线调试客户端的方法，在这做个总结。因为其他几个方式不太适用，所以我只贴出我现在使用的方法（涉及到科学上网，不会的同学可以百度或者问问朋友）。此方法适用移动端网页和在APP打开的webview页面，操作方式如下。

1. PC和手机都要下最新版本的chrome浏览器
2. 手机和PC用数据线连接，打开USB调试模式
3. PC的chrome浏览器打开 chrome://inspect页面，页面显示如下，如果不对说明chrome浏览器不是最新的请重新下载

4. 打开手机chrome，打开百度可以看见上图中有手机机型出现，下面就是打开的网页，
a):可以在这里输入手机要打开的url然后open，手机上显示的当前页面就会改变
b):inspect表示开始调试当前页面，会打开调试面板(重要)
c):focus tab，表示让手机显示当前这个连接
d):reload表示重新加载页面，也就是刷新e):close表示关闭当前手机显示的页面至此，移动端的网页调试部分就结束了，webview除了上诉4个步骤，还要进行如下步骤

5. 客户端的webview类上加入

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {    WebView.setWebContentsDebuggingEnabled(true);}
复制代码

提示：WebView 调试不会受应用清单中 debuggable 标志的状态的影响。如果您希望仅在 debuggable 为 true时启用 WebView 调试，加入

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {    if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE))    { WebView.setWebContentsDebuggingEnabled(true); }}    
复制代码

6.加好后，打开手机APP的webview页面，同时打开PC端的chrome://inspect/#devices页面，可以看到出现了webview页面的信息。

点开inspect可进行页面调试。此外，如果只想打印console的信息，可以使用vconsole，具体方式可自行搜索。

转载于:https://juejin.im/post/5ccfe6c5f265da038d0b5876