前言
很多做前端的同学对与Android和iOS原生不是很了解，当涉及混合开发的时候调试特别麻烦。尤其是需要适配Android和iOS两端。而iOS的UiWebView和WkWebView差异性非常大。Android就更不用说了Google在Android 4.0之前一直用的是性能非常差的Webkit内核做的移动端引擎支持（估计Google也没想到移动互联网发展这么迅速） 4.0之后开始使用Chromium内核，国内各大厂商还会对自家产品做修改。所有移动Web的兼容和适配对前端开发者来说一直是一个头疼的问题。
原理
其实移动端Web调试的思路非常简单，就是将移动设备的Web映射到电脑的浏览器上，利用浏览器提供的强大的调试工具来进行调试。剩下的就和普通Web开发一样了。
iOS Web调试
工具：iOS设备，Mac（要用Safari浏览器）
1.打开Safari 开发 ：Safari -> 偏好设置 -> 高级 -> 勾选在菜单栏显示“开发”菜单
- 打开Safari浏览器偏好设置 快捷键：
command + ,
image
2.开启iOS设备的 Web检查器 :设置 -> Safari -> 高级 -> Web 检查器
image
3.运行App,打开需要调试的Web页面
image
4.开始调试：
image
Android WebView 调试
工具：Android设备，Chrome浏览器（Chrome DevTools）
1.Android设备连接电脑并打开USB调试，运行App打开需要调试的Web页面。
具体怎么操作就不说了
2.Android App里面开启WebView调试
//WebView的静态方法
WebView.setWebContentsDebuggingEnabled(true);
3.打开Chrome浏览器输入地址：chrome://inspect/#devices
image
4.选择需要调试的网址，点击 inspect 开始调试
image
注意：第一次打开调试面板的时候是白的，什么都没有，这个是因为Chrome DevTools需要下载东西，需要翻墙
5.开始调试，剩下的就和普通Web调试一样了。
image
