一、系统自带调试功能

（一）、IOS系统

a、有真机（要求iOS 6 +）

1、iPhone开启web检查（设置 -> Safari -> 高级 -> 开启 Web 检查器）
2、Lightning 数据线将 iPhone 与 Mac 相连
3、iPhone 使用 Safari 浏览器打开要调试的页面
4、Mac 打开 Safari 浏览器调试（菜单栏 —> 开发 -> iPhone 设备名 -> 选择调试页面）（如果你的菜单栏没有“开发”选项，可以到左上角 Safari -> 偏好设置 -> 高级 -> 在菜单栏中显示“开发”菜单。）

如果要调试原生IOS应用中的webview页面，则需要 App 必须开启 DEBUG 模式！！！另外，由于IOS有签名校验机制，真机正式包不允许Safari 直接Debug，因此要求安装在真机上的包必须是测试签名打的包。需要联系IOS客户端将我们的ios设备id写入到可信任设备列表中，然后使用 iTunes 安装客户端提供的测试包即可。

b、无真机

无真机则使用Xcode里的内置的 iOS 模拟器

1、MAC 在 App Store 安装 Xcode
2、右键 Xcode 图标 -> Open Developer Tool -> Simulator
3、运行Simulator后在Simulator中打开safari ，选择Mac的 Safari的开发菜单，找到Simulator 即可

image.png

如果想调试低版本IOS，可以点击左上角 Xcode -> Preferences -> Downloads 就可以选择相应的版本了

如果想调试原生app里的webview应用，可在模拟器中打开webview应用，在mac的Safari 上选择 iOS Simulator 即可；

image.png

（二）、安卓系统

a、有真机（要求 Android 版本 4.0 +）

1、使用 USB 数据线将手机与电脑相连(驱动安装失败可以到 Android Studio
手动安装)
2、手机进入开发者模式，勾选 USB 调试，并允许调试
3、电脑打开 Chrome 浏览器（要求Chrome 版本 >= 32），在地址栏输入：chrome://inspect/#devices 并勾选 Discover USB devices 选项
4、手机打开网址，在 Chrome 浏览器点击相应的inspect 按钮即可(需要翻-强否则会出现HTTP/1.1 404 Not Found 或者空白页面)

如果需要调试原生安卓应用中的WebView 页面，则需要在WebView 类上调用静态方法 setWebContentsDebuggingEnabled

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

上述设置适用于应用中的所有WebView；WebView 调试不会受应用清单中 debuggable 标志的状态的影响。如果您希望仅在 debuggable 为 true 时启用 WebView 调试，请在运行时测试标志。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {    if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE))
    { WebView.setWebContentsDebuggingEnabled(true); }
}

以上具体可看这里远程调试 Android 设备使用入门、远程调试 WebView

b、无真机

这里推荐使用 Genymotion 软件，使用 Genymotion 前需要安装 VirtuaBox，并且注册登陆后才能显示所有的虚拟设备。

二、weinre

weinre 不推荐，测试发现weinre不支持查看资源加载情况及部分js错误不展示(需要加延时)

1、安装weinre npm install -g weinre
2、启动weinre weinre --httpPort 8080 --boundHost -all-
3、在待测试的页面中注入脚本

image.png

4、进入调试控制界面

image.png

三、 spy-debugger

spy-debugger原理是集成了weinre，简化了weinre需要给每个调试的页面添加js代码。spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码。让页面调试更加方便。当然它对weinre在页面document ready事件前，无法打印console.log日志进行了增强修复，增强了weinre打印未捕获异常(Uncaught Exceptions)功能。

1、npm install spy-debugger -g
2、 spy-debugger -p 8080 设置8080端口
还有其他设置如：
a、设置外部代理（默认使用AnyProxy）spy-debugger -e http://127.0.0.1:8888
b、是否只拦截浏览器发起的https请求 spy-debugger -b false （(默认： true)）
c、设置页面内容为可编辑模式 spy-debugger -w true (默认： false)
d、是否允许weinre监控iframe加载的页面 spy-debugger -i true (默认： false)
3、设置手机HTTP代理，代理的ip地址为pc的ip地址，端口为 spy-debugger的启动端口（默认为9888），这里的端口号为8080 不是9888

这里特别提一下pc的ip地址，由于我安装了VirtualBox，spy-debugger将我的pc ip识别成了 VirtualBox IPv4 地址（在win10 采用 ipconfig -all 得到以太网适配器 VirtualBox Host-Only Network:）
而不是我的pc真实ip（以太网适配器以太网: IPv4 地址）

image.png

Android设置代理步骤：设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动
iOS设置代理步骤：设置 - 无线局域网 - 选中网络 - HTTP代理手动

4、手机安装证书（注：手机必须先设置完代理后再通过(非微信)手机浏览器访问安装证书）
扫码安装

image.png

有一点别遗漏了设置->通用->关于本机->证书信任设置-> 找到node-mitmproxy CA（打开）
5、用手机浏览器访问你要调试的页面即可。

四、待补充

五、ios-webkit-debug-proxy

谷歌出品的，具体使用可看这里使用Chrome DevTool调试iOS设备的webView 或者调试iOS H5 项目的另一种选择-ios-webkit-debug-proxy
windows 看这里通过 Chrome 调试运行在 IOS-safari 上的页面

六、 vConsole

七、 Eruda

Eruda据说比vConsole更好用

八、TBS Studio

这个只适合接入x5内核的app 如微信、手Q、QQ音乐、QZone中的webview

九、Android 上的 x5 内核（主要针对微信等）

过程略繁琐，但是这个方案应该是目前调试webview最强大的工具，支持断点调试、控制台打印等。以下步骤以微信举例：

前期准备
- 下载 TbsSuiteNew.apk 安装到手机
- 打开微信，进入任意聊天界面，输入框内输入 //deletetbs，点发送
- 打开 TbsSuiteNew，安装本地 tbs 内核
  应用包名微信：com.tencent.mm，qq：com.tencent.mobileqq，qq 空间：com.qzone，本例中选择微信即可
- 启动应用，用微信访问一个页面，停留1分钟左右，目的是让微信来静默安装刚导入进去的tbs_xxxx_inspector.apk 包
- 一分钟过后打开TbsSuiteNew 检查是否安装成功。
  这里还需要在检查下打开微信随便进入一个 webview 页面然后长按页面文字是否有水滴，若有则成功
ADB安装
- 官网下载 android-sdk ，执行tools文件夹下面的 android，然后选择 android sdk platform tools 安装（示意图）
- 配置android环境变量 vim ~/.bash_profile
```
export ANDROID_TOOLS=/Users/sherlock/dev/android-sdk-macosx/platform-toolsexport PATH=$PATH:$ANDROID_TOOLS
```
- 输入source .bash_profile，执行下环境变量；接着在终端输入 adb，看是否已经配置ok；
- usb连接手机，启动调试模式。终端输入adb devices，就能看到已经连接的设备。
  有时 adb devices不能显示连接设备，需要拔掉数据线，多插几次，并且退出终端，然后重新打开，重启adb。

python启动调试服务

下载调试包，解压，找到其中的 inspector_client20150401 解压，然后进入

执行以下 python 命令，

python ./inspector.py —abd 你自己的adb路径
python ./inspector.py --adb /Users/sherlock/dev/android-sdk-macosx/platform-tools/adb

启动成功，PC 打开 Chrome 浏览器，访问 http://localhost:9222/; 手机打开微信任意 webview，就能在 Chrome 看到这个页面的选项卡，点进去就是熟悉的调试界面～

以上选自移动端浏览器调试方法汇总

十、微信web开发者工具

十一、 adb 辅助工具

UC 手机浏览器调试可能需要用到 adb 辅助工具，具体可见 UC 手机浏览器调试经验

十二、 Android调试神器stetho

Stetho 是一个功能强大的 Android 应用调试桥，起到桥梁的作用，连接 Android 应用和 Chrome，通过 Chrome 开发者工具调试 Android 应用，提供视图元素检查，网络监控，数据库动态交互，Dumpapp（可扩展的命令行交互接口），JavaScript Console 等功能。
当启用后，开发者可以通过 Chrome 桌面浏览器中的开发者工具访问本地应用。开发者也可以选择启用可选的 dumpapp 工具提供一个强大的应用内部命令行接口。
作者：linchaolong
链接：https://www.jianshu.com/p/38d8324b126a

十三、debugGap

目前为止找到最好的移动端调试工具-debugGap
特点：据说安卓支持断点调试；其他感觉没啥特色；
官网 https://www.debuggap.com/debug_webview.html

十四、whistle

它其实是Node 版的 Fiddler、Charles，不过这个工具能远比后两者更加适合 Web 开发者、使用更简单、功能也更加实用；其支持：1、替代本地的host文件；2、转换 http 协议（可本地模拟https）3、mock数据 4、修改后端的返回码 5、往html插入脚本或样式；

大致介绍：
whistle 使用实践
官方文档：
http://wproxy.org/whistle/
https://github.com/avwo/whistle/blob/master/README-zh_CN.md

十五、Mobile Debug

https://www.mobiledebug.com/

参考资料

1、移动端真机调试指南
2、前端 WebView 指南之调试篇
3、打造最舒适的webview调试环境

移动端前端调试工具总结

一、系统自带调试功能

（一）、IOS系统

a、有真机（要求iOS 6 +）

b、无真机

（二）、安卓系统

a、有真机（要求 Android 版本 4.0 +）

b、无真机

二、weinre

三、 spy-debugger

四、待补充

五、ios-webkit-debug-proxy

六、 vConsole

七、 Eruda

八、TBS Studio

九、Android 上的 x5 内核（主要针对微信等）

十、微信web开发者工具

十一、 adb 辅助工具

十二、 Android调试神器stetho

十三、debugGap

十四、whistle

十五、Mobile Debug

参考资料

推荐资料

移动端前端调试工具总结

一、系统自带调试功能

（一）、IOS系统

a、有真机（要求iOS 6 +）

b、无真机

（二）、安卓系统

a、有真机（要求 Android 版本 4.0 +）

b、无真机

二、weinre

三、 spy-debugger

四、 待补充

五、ios-webkit-debug-proxy

六、 vConsole

七、 Eruda

八、TBS Studio

九、Android 上的 x5 内核（主要针对微信等）

十、微信web开发者工具

十一、 adb 辅助工具

十二、 Android调试神器stetho

十三、debugGap

十四、whistle

十五、Mobile Debug

参考资料

推荐资料

四、待补充