前言
在我们前端开发一些 H5 内嵌 app webview 项目的时候，经常会遇到调试的各种困难，下面就几种调试方案做一些整理，包括 ios，Android 机型调试，希望对大家有所帮助我们比较常见的调试工具有： 腾讯出品的 Web 调试面板 vconsole，抓包工具 Charles
等，这些工具常见的使用方法，大家自行百度 Google 一下就有很多方案
下面就三种调试方案 做一下详细介绍，因为我的电脑是 mac 本，所以目前先使用 mac 举例（windows 后面补充），差别也不是很大
网页检查工具 weinre
第一步：我们通过如下方式安装
weinre：1
npm install -g weinre
第二步：然后在命令行中启动
weinre服务端：1
weinre --boundHost [hostname | ip address |-all-] --httpPort [port]
可以指定自己的电脑 IP，和端口号启动，也可以通过下面的方式，直接启动到 8080 端口（也可以指定其他端口）
1
weinre --httpPort 8080--boundHost -all-
第三步：接下来在 Chrome 浏览器打开 本地 ip:8080，或者 127.0.0.1:8080（不要用 localhost 访问），即可看到
weinre的页面，点击debug client user interface，如红框所示：
*注意：
点击 debug client user interface 后，进入一个新的页面，Targets 会显示 none，所以我们需要增加 Debug Target，这时候我们需要在我们调试的项目的 index.html 页面引入 js
1 | <script src="http://电脑ip:weinre服务启动的端口号/target/target-script-min.js#anonymous"type="text/javascript"></script> |
第四步：确保手机和电脑链接的同一个 wifi，使用手机浏览器 或者 测试 APP 上的跳转测试打开需要调试的页面，如果能看到
Target，下面有数据，就说明Target添加成功了，然后选中Targets下面的调试页面，第五步：选中
Target后，我们可以查看Elements，就能看到我们检测的页面的元素了
也可以在 network 上面查看网络 api 请求，进行调试工作，如图所示：
ios 机型调试方案
说到 ios 调试，最经典的不过 Mac + IOS + Safari 方案：
第一步：打开 ios 手机 设置 > Safari 浏览器 > (在页面最下面)高级选项 > Web 检查器，步骤如下：
备注：高级选项里面的 JavaScript 也要打开，一般默认都是打开状态第二步： 打开 Mac 上的 Safari 浏览器 > 偏好设置 > 高级 > 在菜单栏中显示“开发”菜单
- 第三步： 用苹果数据线连接你的
Mac 电脑和 ios 手机，会弹出一个信任设备的弹窗，选择信任设备。然后在手机的
Safari 浏览器中输入你要调试页面的 url 进行访问，并在电脑上的 safari 浏览器菜单上找到 【开发】选项查看检测到的页面，并点开，如下图所示
当我们点开需要调试的页面后，电脑 safari 会弹出调试的窗口，如下图所示
然后我们就能愉快的进行调试工作了，就和浏览器调试一样，当我们选中一块元素的时候，会直接响应到手机上
Android 机型调试方案
Android 机型的调试方式有点复杂，Chrome 谷歌浏览器提供了很好的调试方案，但是需要加载https://chrome-devtools-frontend.appspot.com 上的资源（国内会被墙），如果你有 vpn 可以直接使用，也可以移步 Chrome 官方文档
- 第一步：打开 Android 手机 设置 > 开发者选项 > USB 调试，如下图所示：
备注：有些 Android 手机没有打开过开发者选项，设置里面是没有【开发者选项】的，基本打开方法都是找设置里面的手机版本，狂点几下，就会进入开发者模式，具体机型可以自行百度查看打开方法，这里不一一列举了。
- 第二步：然后通过 usb 数据线连接你的电脑和 Android 手机，会弹出如下界面，点击 确定:
第三步：在你的电脑 Chrome 浏览器输入 chrome://inspect/#devices 地址， Android 手机打开我们需要调试的 webview 页面，如图所示，我们就能看到我们的测试手机，以及 webview 页面
第四步：点击上面图中红框中检测到的 webview 页面，点击 inspect 按钮，进入调试页面，如图所示：
到此我们就能愉快的进行调试工作了。
备注：
再调试的过程中，我们会遇到各种检测不到 Android 手机设备以及 检测不到 webview，或者点击 inspect 之后，页面空白的情况，试试下面的几种方案：
如果是检测不到手机，可以检查一下 手机设置当中 开发者工具 以及 usb 调试 有没有打开；或者通过插拔 usb 数据线刺激一下 chrome inspect 检测
如果遇到检测不到 webview 的情况，或者 点击 inspect 之后页面空白，就需要找相应的 APP 负责人 确认一下，手机上面装的是否是 debugger 调试版本的 app.
Android 机型调试 推荐 直接使用 edge 浏览器 调试
如果有的小伙伴没有 vpn 的话，可以下载 edge 浏览器，输入框访问：
1 | edge://inspect/#devices |
点击 “启动调试” 按钮，弹出 inspect 页面，如图所示：
点击 inspect 即可调试，步骤如 Chrome 浏览器打开 chrome://inspect/#devices 地址操作一样。
注意事项：
启动调试后，检测设备稍慢，需要稍等一会；