本文作者：IMWeb helinjiang 原文出处：IMWeb社区 未经同意，禁止转载
开发Hybrid混合应用时，很多人都觉得调试是一件比较麻烦的事情，因为它可能会依赖于app环境，绝不是普通的h5页面那么简单。
前些日子一直做手Q上的页面开发，针对如何调试，有一些心得，在此记录。注意，本文内容仅限于在windows中调试安卓系统中的Hybrid混合应用。本文是在 @feix760 相关文档基础上整理而来，并作了适当的内容补充，在此特别表示感谢！
1. 原理简介
借助Chrome的DevTools工具，连接手机后，可以呼起Chrome浏览器中的开发者工具，然后就能够像调试普通页面一样调试手机中的页面。
更详细的细节，请看 官方说明。
2. 安卓手机
从 Android 4.4 开始，webkit是支持远程调试的，不过需要将app的debug模式打开，可以使用如下代码：
代码语言：javascript复制WebView.setWebContentsDebuggingEnabled(true);由于大部分 App 的 debug 模式是关闭的，即便是内部 App，比如 QQ/微信，要去找一个开启了debug 模式的版本还是比较麻烦的。因此需要使用借助第三方工具来强制开启任何 App 的 Android webview debug模式，使之可以使用 chrome inspect。而这个工具就是 Xposed 。
我们已经提供了一份要安装的文件，请首先到 https://github.com/feix760/WebViewDebugHook 下载文件。
2.1 root设备
因为涉及到 root 权限，因此需要将手机进行 root。有很多工具可以来 root，比如KingRoot、一键root、360一键root等。如果你安装了QQ电脑管家，可以在“电脑管家-工具箱-其他”列表里面看到KingRoot。
2.2 安装xposed框架
在下载文件的hook.zip中，找到 de.robv.android.xposed.installer_v33_36570c.apk，安装之。也可以去 官网 下载。
2.3 安装xposed webview debugging模块
在下载文件的hook.zip中，找到 WebViewDebugHook.apk，安装之。
2.4 激活Xposed
安装后上述两个apk之后，可以看到手机上面出现了一个叫 Xposed Installer 的图标，点击进去之后会看到提示说Xposed未激活，点击红色字体部分，会切换到另外一条页面，点击“安装/更新”按钮即可。
但有部分手机会出现类似如下的错误，导致无法点击“安装/更新”，目前已知的是部分版本的MIUI是会出现这个问题的（红米Note和小米Note试过不行，但小米4是没问题的）。
安装完成之后，重启再打开，再点击刚才点击过的地方，切入页面之后，勾选，再重启，重启之后即激活了Xposed。
2.5 关于QQ等
QQ等默认会使用X5内核，把下载文件中的 debug.conf 放在sd卡根目录下就可以强制它使用 Android 自带 webview 。
3. Fiddler
Fiddler是最强大最好用的Web调试工具之一，它能记录所有客户端和服务器的http和https请求，允许监视，设置断点，甚至修改输入输出数据．所以无论是从事什么开发，哪种语言，只要你想了解HTTP，这个工具就值得你去了解。
在Windows中下载Fiddler2或Fiddler4，安装完成之后，点击菜单中的Tools-Fiddler Options，之后会弹出一个设置面板，切换到Connections 标签页，设置其端口号为8888，且勾选 “Allow remote computers to connect”
Fiddler是以代理web服务器的形式工作的，它使用代理地址：127.0.0.1,端口:8888。当Fiddler退出的时候它会自动注销，这样就不会影响别的程序。不过如果Fiddler非正常退出，这时候因为Fiddler没有自动注销，会造成网页无法访问。解决的办法是重新启动下Fiddler。
4. 测试连接
我们推荐PC和手机在同一个局域网内，这样比较好操作，这也意味着如果是台式机，则需要安装无线网卡。
按照以下步骤：
- PC和手机都在同一个局域网内
- 获取PC的IP地址（如果其有多个IP地址，记得是和手机在同一个局域网内的IP地址）
- 设置手机连接wifi时启用 http 代理，其中代理ip就是PC的ip，端口号填写Fiddler中设置了的8888
- 在手机上使用浏览器打开任意一个网页，观察PC端Fiddler是否已经成功代理了手机上发出的http请求。
- PC 上使用 chrome 打开 chrome://inspect ，然后打开任意 App 的 webview ，此时就应该能够在chrome浏览器上看到出现了可调试的入口，点击 "inspect"，即可打开调试工具，此时就可以愉快的调试了。
