一、系统自带调试功能
（一）、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、在https://developer.apple.com/download/more/?q=xcode 里或者MAC 的 App Store 安装 Xcode；
如果要安装IOS 8.1- IOS11.3，建议安装xcode9.4.1(9F2000)版本，如果要安装IOS10.3.1-IOS12.2，建议安装xcode 10.3(10GB) 版本；
2、右键 Xcode 图标 -> Open Developer Tool -> Simulator
3、运行Simulator后 在Simulator中打开safari ，选择Mac的 Safari的开发菜单，找到Simulator 即可
如果想调试低版本IOS，可以点击左上角 Xcode -> Preferences -> Downloads 就可以选择相应的版本了
-
如果想调试原生app里的webview应用，可在模拟器中打开webview应用，在mac的Safari 上选择 iOS Simulator 即可；
image.png
（二）、安卓系统
a、有真机（要求 Android 版本 4.0 +）
1、使用 USB 数据线将手机与电脑相连(驱动安装失败 可以到Android Studio
手动安装)
2、手机开启开发者模式(安卓4.2及以后版本 需要进入关于手机-->连续点击版本号7次才能够开启)并进入，勾选 USB 调试，并允许调试
3、电脑打开 Chrome 浏览器（要求Chrome 版本 >= 32），在地址栏输入：chrome://inspect/#devices 并勾选 Discover USB devices 选项
4、手机打开网址，在 Chrome 浏览器 点击 相应的inspect 按钮即可(需要翻-强 否则会出现HTTP/1.1 404 Not Found 或者空白页面)
- 如果需要调试原生安卓应用中的WebView 页面（需要安卓4.4及以后），则需要在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
推荐 极客学院的官方教程
如果以上方法无效，可通过 Android SDK 提供的 adb 二进制包方法： 在Android上进行远程调试（旧版工作流程) ，这个方法主要推荐Chrome32以下
b、无真机
1、Android Virtual Device(AVD)
2、 夜神模拟器
3、Genymotion 软件，使用 Genymotion 前需要安装 VirtuaBox，并且注册登陆后才能显示所有的虚拟设备。
4、网易的Mumu模拟器
5、雷电模拟器
6、逍遥模拟器
二、weinre
weinre 不推荐，测试发现weinre不支持查看资源加载情况及部分js错误不展示(需要加延时)
1、安装weinre npm install -g weinre
2、启动weinre weinre --httpPort 8080 --boundHost -all-
3、在待测试的页面中注入脚本
4、进入调试控制界面
三、 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 -g2、
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 地址）
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
它官网里提到了 Inspector (谷歌在Chrome中内嵌的一款调试工具Chrome DevTools)
官网QQ群 434421502
不让用户使用x5内核的方法：在聊天页面 输入 http://debugtbs.qq.com 进入后
如何判断已加载了x5内核？ http://soft.imtt.qq.com/browser/tes/feedback.html，显示000000表示加载的是系统内核，显示大于零的数字表示加载了x5内核（该数字是x5内核版本号）
2019年5月24日更新
今天测试一台vivo Y66i A（手机系统7.1.2、未升级原生浏览器版本Chrome Mobile 38.0.2125 vivoBrower5.xxx） 如果清除TBS内核后，则使用微信最原始内置的浏览器（不是x5内核），该浏览器内核版本比未升级原生浏览器内核版本要高（该浏览器内核版本跟微信版本有关系，未升级原生浏览器不支持let、=>等ES6语法，但该浏览器却支持）
九、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-tools export 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 看到这个页面的选项卡，点进去就是熟悉的调试界面～
以上选自 移动端浏览器调试方法汇总
https://github.com/jieyou/remote_inspect_web_on_real_device
https://www.jianshu.com/p/ccf124f1f74b
十、微信开发者工具
推荐：微信开发者工具
不推荐（版本没在维护）：微信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
十五、UC浏览器调试
1、 开发版下载： https://dev.ucweb.com/
2、如何在手机上远程调试UC浏览器 https://dev.ucweb.com/docs/pwa/docs-zh/oo3g8d?spm=ucplus.11213647.toc.10.28c24ed0ihk661
十六、Mobile Debug
十七、Ghostlab
http://www.vanamco.com/ghostlab-downloads/
浏览器信息检测神器：
1、检测浏览器名称和版本及内核及版本的网站 ：http://i.ewceo.com/browser.html
2、检测操作系统、浏览器内核及其版本的网站：https://ie.icoa.cn/
3、浏览器内核、操作系统、屏幕大小及h5支持情况：http://mybrowse.osfipin.com/ 【IE测试最准确】
4、Chromium浏览器内核检测：https://liulanmi.com/labs/core.html
5、非Chromium浏览器内核检测：https://liulanmi.com/core
6、Safari浏览器更新信息：https://trac.webkit.org/browser/tags/Safari-537.51.2
7、浏览器内核检测：http://pc.uc.cn/core/
8、浏览器头信息及ip地理位置对应关系 https://www.sojson.com/ip/
9、https://ie.itzmx.com/ 测试IE版本 准确
云真机
建议看我的这一篇文章：云真机汇总对比
其他工具
1、iphone、ipad 有真机补充：MIH(make it happen)工具： http://www.mihtool.com/
2、mac 有真机补充 https://www.parallels.com/ 最新版本可以在mac上安装IE8-11浏览器及安卓8.0
参考资料
1、移动端真机调试指南
2、前端 WebView 指南之调试篇
3、打造最舒适的webview调试环境
推荐资料
1、前端｜本地调试H5页面方案总结
2、Charles 从入门到精通
3、手把手教你如何在Mac本地调试微信JS SDK
4、 各种 真机远程调试 方法 汇总
