移动端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="vconsole.min.js"></script>
<script type="text/javascript">
var vConsole = new VConsole();
</script>

其中vconsole.min.js下载和使用能够查看https://www.meiwen.com.cn/subject/vybabqtx.html

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

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

 

 

Android的WebView调试工具（无需FQ，可同时调试多个设备，永不过时）

http://www.javashuo.com/article/p-apmlnkah-go.html

 

微信打开X5调试，使手机与微信开发者工具均可以进行调式

https://www.jianshu.com/p/e4a8ef68c35b

 

UC 浏览器开发者版本

https://dev.ucweb.com/download/?spm=ucplus.11199946.banner.1.53974692harejG

开发者版本 (Developer Edition) 支持 DevTools Protocol，它容许开发者使用任何兼容该协议的客户端（如 Chrome 开发者工具）进行远程调试。最新版基于 Chromium 57 构建，对 PWA 、ES2015+ 等新特性支持良好。