移动Web调试技巧

前言

很多做前端的同学对与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