移动端H5调试

背景：
开发PC页面的时候使用chrome浏览器的开发者工具，能够很容易的捕获到页面的dom元素，而且能够修改样式，方便调试；
可是手机上却很麻烦，由于手机上没有办法直接打开开发者工具查看元素。其实能够经过将设备链接到PC，使用PC的开发者工具检测。

1.安卓手机调试工具chrome DevTools
调试步骤
a、须要知足安卓系统版本为Android 4.4以上，而且须要再你的APP内配置相应的代码，在WebView类中调用静态方法setWebContentsDebuggingEnabled，以下：
if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
即须要app支持追加代码打包
b、把Android设备设置为开发者模式，把手机USB调试模式打开(“设置”->”开发人员选项”->”USB调试”) 
c、用USB数据线将电脑和手机链接
d、chrome浏览器，建议最新版本，浏览器地址输入chrome://inspect/#devices
e、操做APP内H5页面，浏览器内会有webview视图，能够捕获页面的dom元素，控制台输出调试，查看接口请求和报错

APP调试页面（试用IOS和安卓）
页面追加以下代码进行调试，能够采用参数动态控制以下代码的追加和调试
<script type="text/javascript" src="https://hd.qingyidai.com/m/activity/wheel/air/vconsole.min.js"></script>
<script type="text/javascript">
var vConsole = new VConsole();
</script>

Fiddler抓包工具
Fiddler是强大的抓包工具，它的原理是以web代理服务器的形式进行工做的，使用的代理地址是：127.0.0.1，端口默认为8888，咱们也能够经过设置进行修改。
代理就是在客户端和服务器之间设置一道关卡，客户端先将请求数据发送出去后，代理服务器会将数据包进行拦截，代理服务器再冒充客户端发送数据到服务器；同理，服务器将响应数据返回，代理服务器也会将数据拦截，再返回给客户端。
Fiddler能够抓取支持http代理的任意程序的数据包，若是要抓取https会话，要先安装证书。

使用：
a、手机端和电脑端同在一个wifi局域网下
b、电脑上打开Fiddler软件
c、手机设置wifi代理，代理地址是电脑的IP地址，端口默认为8888
d、手机操做浏览器H5页面，Fiddler会有接口请求