背景:
开发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+ 等新特性支持良好。