移动端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会有接口请求

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

https://www.cnblogs.com/hjblog/p/9078147.html#4055020

微信打开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+ 等新特性支持良好。

巴特西

移动端H5调试

最新文章

热门文章